/* Ordering-flow brand layer. Scoped to .orders-flow on NewOrder.razor and
   EasyDesigner.razor so no other page is affected. Atelier palette +
   Fraunces/Jost typography mirroring the print production sheet. */

.orders-flow,
.cart-pill-container,
.cart-pill__backdrop {
    /* Modern atelier palette — refined champagne brass on crisp paper,
       cooler ink for readability, warmer muted for quiet labels.
       Variables are also defined on .cart-pill-container because the
       floating pill renders outside .orders-flow and would otherwise
       fall back to inherited defaults (or stay light in dark mode). */
    --cs-brass: #c49a5e;
    --cs-brass-2: #a07a42;
    --cs-deep: #2a2319;
    --cs-ink: #141211;
    --cs-ink-2: #3d3730;
    --cs-paper: #fbfaf6;
    --cs-rule: #e7e1d4;
    --cs-muted: #7c7264;
    --cs-amber: #a27a2e;
    --cs-green: #3f5a3a;
}

.orders-flow {
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: var(--cs-ink);
    background: transparent;
}

/* ── Typography ── */
.orders-flow h2,
.orders-flow h3,
.orders-flow h4,
.orders-flow h5,
.orders-flow .card-header h4,
.orders-flow .card-header h5,
.orders-flow .card-header h6 {
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--cs-deep);
    letter-spacing: -0.005em;
}

.orders-flow h5.border-bottom {
    border-bottom: 1pt solid var(--cs-rule) !important;
    padding-bottom: 0.5rem;
}

.orders-flow .form-label.fw-semibold,
.orders-flow .form-label {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    color: var(--cs-ink-2);
    letter-spacing: 0.02em;
    font-size: 0.86rem;
}

.orders-flow .text-muted,
.orders-flow small.text-muted {
    color: var(--cs-muted) !important;
}

/* ── Cards ── */
.orders-flow .card {
    background-color: var(--cs-paper);
    border: 1px solid var(--cs-rule);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(58, 47, 34, 0.04);
}

.orders-flow .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--cs-rule);
    color: var(--cs-deep);
    padding: 0.75rem 1rem;
}

.orders-flow .card-header.bg-primary,
.orders-flow .card.border-primary > .card-header {
    background-color: var(--cs-paper) !important;
    color: var(--cs-deep) !important;
    border-bottom: 1px solid var(--cs-brass);
}

.orders-flow .card.border-primary {
    border-color: var(--cs-brass) !important;
}

.orders-flow .card-header.bg-primary-subtle {
    background-color: rgba(176, 141, 87, 0.08) !important;
}

.orders-flow .card-header.bg-info,
.orders-flow .card-header.bg-info.bg-opacity-10 {
    background-color: rgba(176, 141, 87, 0.08) !important;
}

.orders-flow .card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--cs-rule);
}

.orders-flow .card.border-info {
    border-color: var(--cs-brass-2) !important;
}

.orders-flow .card.bg-light {
    background-color: var(--cs-paper) !important;
}

.orders-flow .border {
    border-color: var(--cs-rule) !important;
}

/* ── Buttons ── */
.orders-flow .btn-primary,
.orders-flow .btn-gold {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: var(--cs-paper);
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.orders-flow .btn-primary:hover,
.orders-flow .btn-gold:hover {
    background-color: var(--cs-brass-2);
    border-color: var(--cs-brass-2);
    color: var(--cs-paper);
}

.orders-flow .btn-outline-primary,
.orders-flow .btn-outline-gold {
    background-color: transparent;
    border-color: var(--cs-brass);
    color: var(--cs-brass);
    font-family: 'Jost', sans-serif;
    font-weight: 500;
}

.orders-flow .btn-outline-primary:hover,
.orders-flow .btn-outline-gold:hover {
    background-color: var(--cs-brass);
    color: var(--cs-paper);
}

.orders-flow .btn-success {
    background-color: var(--cs-green);
    border-color: var(--cs-green);
    color: var(--cs-paper);
}

.orders-flow .btn-success:hover {
    background-color: #324a2e;
    border-color: #324a2e;
    color: var(--cs-paper);
}

.orders-flow .btn-outline-secondary {
    border-color: var(--cs-rule);
    color: var(--cs-ink-2);
    font-family: 'Jost', sans-serif;
}

.orders-flow .btn-outline-secondary:hover {
    background-color: var(--cs-rule);
    color: var(--cs-deep);
}

.orders-flow .btn-warning {
    background-color: var(--cs-amber);
    border-color: var(--cs-amber);
    color: var(--cs-paper);
}

.orders-flow .btn-outline-warning {
    border-color: var(--cs-amber);
    color: var(--cs-amber);
}

.orders-flow .btn-outline-warning:hover {
    background-color: var(--cs-amber);
    color: var(--cs-paper);
}

.orders-flow .btn-info {
    background-color: var(--cs-brass-2);
    border-color: var(--cs-brass-2);
    color: var(--cs-paper);
}

.orders-flow .btn-outline-info {
    border-color: var(--cs-brass-2);
    color: var(--cs-brass-2);
}

.orders-flow .btn-outline-info:hover {
    background-color: var(--cs-brass-2);
    color: var(--cs-paper);
}

/* ── Alerts ── */
.orders-flow .alert-info,
.orders-flow .alert-primary {
    background-color: rgba(176, 141, 87, 0.08);
    border-color: var(--cs-brass);
    color: var(--cs-deep);
}

.orders-flow .alert-info .alert-link,
.orders-flow .alert-primary .alert-link {
    color: var(--cs-brass-2);
    text-decoration: underline;
}

.orders-flow .alert-warning {
    background-color: rgba(139, 111, 46, 0.08);
    border-color: var(--cs-amber);
    color: var(--cs-amber);
}

.orders-flow .alert-success {
    background-color: rgba(63, 90, 58, 0.08);
    border-color: var(--cs-green);
    color: var(--cs-green);
}

/* ── Badges ── */
.orders-flow .badge.bg-primary,
.orders-flow .badge.bg-info,
.orders-flow .badge.bg-info.bg-opacity-75 {
    background-color: var(--cs-brass) !important;
    color: var(--cs-paper) !important;
}

.orders-flow .badge.bg-white.text-primary {
    background-color: var(--cs-paper) !important;
    color: var(--cs-brass) !important;
}

.orders-flow .badge.bg-light.text-dark {
    background-color: var(--cs-paper) !important;
    color: var(--cs-deep) !important;
    border: 1px solid var(--cs-rule);
}

.orders-flow .badge.bg-warning {
    background-color: var(--cs-amber) !important;
    color: var(--cs-paper) !important;
}

.orders-flow .badge.bg-secondary {
    background-color: var(--cs-muted) !important;
    color: var(--cs-paper) !important;
}

/* ── Form controls ── */
.orders-flow .form-control,
.orders-flow .form-select {
    background-color: var(--cs-paper);
    border-color: var(--cs-rule);
    color: var(--cs-ink);
    font-family: 'Jost', sans-serif;
}

.orders-flow .form-control:focus,
.orders-flow .form-select:focus {
    border-color: var(--cs-brass);
    box-shadow: 0 0 0 0.2rem rgba(176, 141, 87, 0.15);
}

.orders-flow .input-group-text {
    background-color: rgba(176, 141, 87, 0.08);
    border-color: var(--cs-rule);
    color: var(--cs-ink-2);
}

.orders-flow .form-check-input:checked {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
}

/* ── Tables ── */
.orders-flow table,
.orders-flow .table {
    color: var(--cs-ink);
}

.orders-flow .table > :not(caption) > * > * {
    border-color: var(--cs-rule);
}

.orders-flow .table thead tr {
    border-bottom: 1pt solid var(--cs-brass);
}

.orders-flow .table thead th {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    color: var(--cs-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.orders-flow .text-primary {
    color: var(--cs-brass) !important;
}

.orders-flow .table-warning {
    background-color: rgba(139, 111, 46, 0.08) !important;
}

/* ── Step indicator ── */
.orders-flow #order-step-content .rounded-circle.bg-success {
    background-color: var(--cs-deep) !important;
    color: var(--cs-paper) !important;
}

.orders-flow #order-step-content .rounded-circle.bg-primary {
    background-color: var(--cs-brass) !important;
    color: var(--cs-paper) !important;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.2);
}

.orders-flow #order-step-content .rounded-circle.bg-light {
    background-color: var(--cs-paper) !important;
    color: var(--cs-muted) !important;
    border: 1px solid var(--cs-rule) !important;
}

.orders-flow #order-step-content [style*="background-color: #dee2e6"] {
    background-color: var(--cs-rule) !important;
}

.orders-flow #order-step-content [style*="background-color: #0d6efd"] {
    background: linear-gradient(90deg, var(--cs-brass), var(--cs-brass-2)) !important;
}

.orders-flow #order-step-content small.fw-semibold {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.orders-flow #order-step-content .text-primary.fw-semibold {
    color: var(--cs-brass) !important;
}

.orders-flow #order-step-content .text-success.fw-semibold {
    color: var(--cs-deep) !important;
}

/* ── Nav tabs / pills (configurator) ── */
.orders-flow .nav-tabs {
    border-bottom: 1pt solid var(--cs-rule);
}

.orders-flow .nav-tabs .nav-link {
    color: var(--cs-muted);
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    border: none;
    border-bottom: 2pt solid transparent;
    border-radius: 0;
    padding: 0.6rem 1rem;
}

.orders-flow .nav-tabs .nav-link:hover {
    color: var(--cs-brass-2);
    border-bottom-color: var(--cs-rule);
    background: transparent;
}

.orders-flow .nav-tabs .nav-link.active {
    color: var(--cs-deep);
    background: transparent;
    border-bottom: 2pt solid var(--cs-brass);
    font-weight: 600;
}

.orders-flow .nav-tabs .nav-link.text-success {
    color: var(--cs-deep) !important;
}

.orders-flow .tab-content {
    background-color: var(--cs-paper);
    border: 1pt solid var(--cs-rule);
    border-top: none;
}

/* ── Accordion ── */
.orders-flow .accordion-item {
    background-color: var(--cs-paper);
    border-color: var(--cs-rule);
}

.orders-flow .accordion-button {
    background-color: var(--cs-paper);
    color: var(--cs-ink);
    font-family: 'Jost', sans-serif;
    font-weight: 500;
}

.orders-flow .accordion-button:not(.collapsed) {
    background-color: rgba(176, 141, 87, 0.08);
    color: var(--cs-deep);
    box-shadow: none;
}

.orders-flow .accordion-button:focus {
    border-color: var(--cs-brass);
    box-shadow: 0 0 0 0.2rem rgba(176, 141, 87, 0.15);
}

/* ── List groups ── */
.orders-flow .list-group-item {
    background-color: var(--cs-paper);
    border-color: var(--cs-rule);
    color: var(--cs-ink);
}

.orders-flow .list-group-item-action:hover {
    background-color: rgba(176, 141, 87, 0.06);
}

.orders-flow .list-group-item.active {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: var(--cs-paper);
}

/* ── Spinners ── */
.orders-flow .spinner-border.text-primary,
.orders-flow .spinner-border.text-info {
    color: var(--cs-brass) !important;
}

/* ── Summary rail ── */
.orders-flow .shirt-summary-rail {
    background-color: var(--cs-paper);
    border: 1pt solid var(--cs-rule);
    border-radius: 4px;
    padding: 1rem 1.1rem;
    font-family: 'Jost', sans-serif;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(58, 47, 34, 0.06);
}

@media (min-width: 992px) {
    .orders-flow .shirt-summary-rail-sticky {
        position: sticky;
        top: 80px;
    }
}

.orders-flow .shirt-summary-rail__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1pt solid var(--cs-brass);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.orders-flow .shirt-summary-rail__title {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--cs-deep);
    margin: 0;
}

.orders-flow .shirt-summary-rail__count {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--cs-muted);
    text-transform: uppercase;
}

.orders-flow .shirt-summary-rail__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--cs-rule);
    width: 100%;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
    cursor: pointer;
}

.orders-flow .shirt-summary-rail__row:last-child {
    border-bottom: none;
}

.orders-flow .shirt-summary-rail__row:hover {
    background-color: rgba(176, 141, 87, 0.05);
}

.orders-flow .shirt-summary-rail__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--cs-rule);
    margin-top: 5px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.orders-flow .shirt-summary-rail__row--complete .shirt-summary-rail__dot {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
}

.orders-flow .shirt-summary-rail__label {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--cs-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: block;
    line-height: 1.2;
}

.orders-flow .shirt-summary-rail__value {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--cs-ink);
    display: block;
    line-height: 1.3;
    margin-top: 0.15rem;
    word-break: break-word;
}

.orders-flow .shirt-summary-rail__value--empty {
    color: var(--cs-muted);
    font-style: italic;
}

.orders-flow .shirt-summary-rail__visualizer {
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1pt solid var(--cs-rule);
}

/* Order-details fabric gallery — medium-large tiles lined up horizontally so
   every fabric on the order is visible at a glance. Tiles wrap to the next
   row on narrow viewports. */
.order-fabric-gallery .order-fabric-tile {
    display: block;
    width: 140px;
    flex: 0 0 auto;
}

.order-fabric-gallery .order-fabric-tile__img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1pt solid rgba(0, 0, 0, 0.08);
    display: block;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.order-fabric-gallery .order-fabric-tile__img--empty {
    background: #f5f0e8;
}

.order-fabric-gallery .order-fabric-tile:hover .order-fabric-tile__img {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(58, 47, 34, 0.12);
}

.order-fabric-gallery .order-fabric-tile__label {
    max-width: 140px;
}

@media (min-width: 992px) {
    .order-fabric-gallery .order-fabric-tile,
    .order-fabric-gallery .order-fabric-tile__img,
    .order-fabric-gallery .order-fabric-tile__label {
        width: 168px;
        max-width: 168px;
    }
    .order-fabric-gallery .order-fabric-tile__img {
        height: 168px;
    }
}

.orders-flow .ps-finish-group-header {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--cs-muted);
    text-transform: uppercase;
    border-bottom: 1pt solid var(--cs-rule);
    padding-bottom: 0.35rem;
    margin-top: 0.25rem;
}

.orders-flow .shirt-summary-rail__monogram {
    width: 100%;
    margin: -0.3rem 0 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1pt solid var(--cs-rule);
}

.orders-flow .shirt-summary-rail__monogram .monogram-preview,
.orders-flow .shirt-summary-rail__monogram .monogram-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* ── Tab group layer ── */
.orders-flow .ps-tab-groups {
    display: flex;
    border-bottom: 1pt solid var(--cs-brass);
    margin-bottom: 0;
}

.orders-flow .ps-tab-group {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    border-bottom: 2pt solid transparent;
    padding: 0.7rem 0.5rem;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--cs-muted);
    letter-spacing: 0.02em;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.orders-flow .ps-tab-group:hover {
    color: var(--cs-brass-2);
}

.orders-flow .ps-tab-group.active {
    color: var(--cs-deep);
    border-bottom-color: var(--cs-brass);
}

.orders-flow .ps-tab-group__badge {
    display: inline-block;
    margin-left: 0.3rem;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--cs-muted);
    vertical-align: middle;
}

.orders-flow .ps-tab-group.active .ps-tab-group__badge {
    color: var(--cs-brass);
}

.orders-flow .ps-tab-group__check {
    color: var(--cs-brass);
    margin-left: 0.3rem;
}

.orders-flow .ps-subpills {
    display: flex;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background-color: rgba(176, 141, 87, 0.05);
    border-bottom: 1pt solid var(--cs-rule);
    flex-wrap: wrap;
}

.orders-flow .ps-subpill {
    background: transparent;
    border: 1pt solid var(--cs-rule);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--cs-ink-2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.orders-flow .ps-subpill:hover {
    border-color: var(--cs-brass);
    color: var(--cs-brass-2);
}

.orders-flow .ps-subpill.active {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: var(--cs-paper);
}

.orders-flow .ps-subpill__check {
    margin-right: 0.25rem;
    color: var(--cs-deep);
}

.orders-flow .ps-subpill.active .ps-subpill__check {
    color: var(--cs-paper);
}

.orders-flow .ps-accordion-group-header {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--cs-brass-2);
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 0.9rem 0.5rem 0.25rem;
    margin: 0;
    border-bottom: 1pt dotted var(--cs-rule);
    background: transparent;
}

/* ── Measurements chip row ── */
.orders-flow .ps-meas-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.orders-flow .ps-meas-chip {
    background: transparent;
    border: 1pt solid var(--cs-rule);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--cs-ink-2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.orders-flow .ps-meas-chip:hover {
    border-color: var(--cs-brass);
    color: var(--cs-brass-2);
}

.orders-flow .ps-meas-chip.active {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: var(--cs-paper);
}

/* ── Cart Compact List (shared by pill panel + Step 3 review main column) ── */
.cart-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-compact-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--cs-muted, #6c757d);
    font-family: 'Jost', sans-serif;
}

.cart-compact-empty i {
    font-size: 1.75rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 0.5rem;
}

.cart-compact-empty p {
    margin: 0 0 0.25rem 0;
    font-weight: 500;
}

.cart-compact-empty small {
    font-size: 0.78rem;
}

.cart-compact-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.4rem 0.55rem;
    border-bottom: 1pt solid var(--cs-rule, #e6dfd0);
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    transition: background-color 140ms ease;
}

.cart-compact-row:last-child {
    border-bottom: none;
}

.cart-compact-row:hover {
    background-color: rgba(197, 165, 90, 0.06);
}

.cart-compact-row.is-service {
    border-left: 3px solid var(--cs-gold, #c5a55a);
    padding-left: 0.4rem;
}

.cart-compact-row.has-missing {
    background-color: rgba(220, 53, 69, 0.04);
}

.cart-compact-row__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-rule, #e6dfd0);
}

.cart-compact-row__chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-compact-row__chip-service,
.cart-compact-row__chip-customer {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.cart-compact-row__chip-service { background-color: var(--cs-brass); color: var(--cs-paper); }
.cart-compact-row__chip-customer { background-color: #fd7e14; color: #fff; }

.cart-compact-row__chip-initials {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--cs-muted, #6c757d);
    letter-spacing: 0.04em;
}

.cart-compact-row__body {
    min-width: 0;
}

.cart-compact-row__name {
    font-weight: 500;
    color: var(--cs-ink, #2a241c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-compact-row__service-tag {
    display: inline-block;
    background-color: var(--cs-amber);
    color: var(--cs-paper);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 1pt 5pt;
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.cart-compact-row__meta {
    margin-top: 1pt;
    font-size: 0.72rem;
    color: var(--cs-muted, #6c757d);
}

.cart-compact-row__style {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cart-compact-row__incomplete {
    color: var(--cs-amber, #d4a017);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cart-compact-row__missing {
    margin-top: 3pt;
    font-size: 0.7rem;
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
    padding: 2pt 5pt;
    border-radius: 3px;
}

.cart-compact-row__amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1pt;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
}

.cart-compact-row__qty {
    font-size: 0.78rem;
    color: var(--cs-muted, #6c757d);
}

.cart-compact-row__total {
    font-weight: 600;
    color: var(--cs-ink, #2a241c);
}

.cart-compact-row__actions {
    display: inline-flex;
    gap: 1pt;
    flex-shrink: 0;
}

.cart-compact-row__btn {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--cs-muted, #6c757d);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.cart-compact-row__btn:hover {
    background-color: rgba(197, 165, 90, 0.12);
    color: var(--cs-ink, #2a241c);
}

.cart-compact-row__btn--danger:hover {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

/* ── Floating cart pill (Steps 1 & 2) ── */
.cart-pill-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    /* Must be above .cart-pill__backdrop (1045). The container creates its
       own stacking context, so the panel/pill's local z-indices are pinned
       inside this value globally — keep this ABOVE the backdrop or every
       click is intercepted by the backdrop and only fires ClosePanel. */
    z-index: 1060;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

/* On mobile, /orders/new renders a 60-ish px sticky bottom nav with
   Back/Next/Submit. Lift the pill so it doesn't cover those buttons.
   The extra clearance is benign on pages without the bar — just a bit
   more breathing room above iOS Safari's bottom toolbar. */
@media (max-width: 767.98px) {
    .cart-pill-container {
        bottom: 5rem;
    }
}

.cart-pill-container > * {
    pointer-events: auto;
}

.cart-pill__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(42, 36, 28, 0.32);
    backdrop-filter: blur(2px);
    z-index: 1045;
    animation: cart-pill-fade 180ms ease-out;
}

.cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.75rem 0.45rem 0.55rem;
    background-color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-brass, #b89a5e);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(42, 36, 28, 0.18), 0 1pt 3px rgba(42, 36, 28, 0.08);
    font-family: 'Jost', sans-serif;
    color: var(--cs-ink, #2a241c);
    cursor: pointer;
    min-height: 44px;
    transition: transform 180ms ease, box-shadow 180ms ease;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.cart-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(42, 36, 28, 0.22), 0 1pt 3px rgba(42, 36, 28, 0.1);
}

.cart-pill:focus-visible {
    outline: 2pt solid var(--cs-brass, #b89a5e);
    outline-offset: 2pt;
}

.cart-pill.is-pulsing {
    animation: cart-pill-pulse 1.4s ease-out;
}

.cart-pill__chips {
    display: inline-flex;
    align-items: center;
}

.cart-pill__chip {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5pt solid var(--cs-paper, #faf6ed);
    margin-left: -6px;
    background-color: var(--cs-gold, #c5a55a);
}

.cart-pill__chip:first-child {
    margin-left: 0;
}

.cart-pill__chip--more {
    background-color: var(--cs-ink, #2a241c);
    color: var(--cs-paper, #faf6ed);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0.02em;
}

.cart-pill__label {
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.cart-pill__sep {
    color: var(--cs-muted, #6c757d);
    margin: 0 1pt;
}

.cart-pill__chevron {
    color: var(--cs-muted, #6c757d);
    font-size: 0.7rem;
    margin-left: 0.15rem;
}

@keyframes cart-pill-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cart-pill-pulse {
    0%   { box-shadow: 0 8px 24px rgba(42, 36, 28, 0.18), 0 0 0 0 rgba(197, 165, 90, 0.5); }
    50%  { box-shadow: 0 10px 28px rgba(42, 36, 28, 0.2),  0 0 0 12px rgba(197, 165, 90, 0); }
    100% { box-shadow: 0 8px 24px rgba(42, 36, 28, 0.18), 0 0 0 0 rgba(197, 165, 90, 0); }
}

/* ── Cart panel (expanded from pill) ── */
.cart-panel {
    width: min(420px, calc(100vw - 32px));
    max-height: min(75vh, 560px);
    background-color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-brass, #b89a5e);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(42, 36, 28, 0.28), 0 2pt 6px rgba(42, 36, 28, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: cart-panel-spring 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

@keyframes cart-panel-spring {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.cart-panel__header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.6rem;
    border-bottom: 1pt solid var(--cs-rule, #e6dfd0);
}

.cart-panel__header h2 {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    color: var(--cs-ink, #2a241c);
    letter-spacing: 0.02em;
}

.cart-panel__count {
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    color: var(--cs-muted, #6c757d);
    font-variant-numeric: tabular-nums;
    flex-grow: 1;
}

.cart-panel__count-price {
    margin-left: 0.25rem;
    color: var(--cs-ink, #2a241c);
    font-weight: 500;
}

.cart-panel__close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    color: var(--cs-muted, #6c757d);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-panel__close:hover {
    background-color: rgba(42, 36, 28, 0.06);
    color: var(--cs-ink, #2a241c);
}

.cart-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.cart-panel__footer {
    border-top: 1pt solid var(--cs-rule);
    padding: 0.65rem 1rem 0.85rem;
    background-color: color-mix(in srgb, var(--cs-paper) 60%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cart-panel__priority {
    display: flex;
    align-items: center;
}

.cart-panel__priority label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
}

.cart-panel__priority span {
    color: var(--cs-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.cart-panel__priority select {
    flex-grow: 1;
    background-color: var(--cs-paper);
    border: 1pt solid var(--cs-rule);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    color: var(--cs-ink);
}

.cart-panel__pricing {
    display: flex;
    flex-direction: column;
    gap: 1pt;
    font-family: 'Jost', sans-serif;
    font-variant-numeric: tabular-nums;
}

.cart-panel__pricing-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--cs-muted, #6c757d);
}

.cart-panel__pricing-row--surcharge {
    color: var(--cs-amber, #d4a017);
    font-weight: 500;
}

.cart-panel__pricing-row--total {
    font-weight: 600;
    color: var(--cs-ink, #2a241c);
    font-size: 1rem;
    padding-top: 4pt;
    border-top: 1pt solid var(--cs-rule, #e6dfd0);
    margin-top: 2pt;
}

.cart-panel__cta {
    background-color: var(--cs-ink, #2a241c);
    color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-ink, #2a241c);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease;
}

.cart-panel__cta:hover:not(:disabled) {
    background-color: var(--cs-brass, #b89a5e);
    border-color: var(--cs-brass, #b89a5e);
}

.cart-panel__cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Step 3 review grid + main column ── */
.review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 992px) {
    .review-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.review-main {
    background-color: var(--cs-paper);
    border: 1pt solid var(--cs-rule);
    border-radius: 8px;
    overflow: hidden;
}

.review-main__header {
    padding: 0.85rem 1rem;
    border-bottom: 1pt solid var(--cs-rule);
    background-color: color-mix(in srgb, var(--cs-paper) 70%, transparent);
}

.review-main__header h4 {
    margin: 0;
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-weight: 500;
    color: var(--cs-ink, #2a241c);
    letter-spacing: 0.01em;
}

.review-main__chip {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border-bottom: 1pt solid var(--cs-rule, #e6dfd0);
    background-color: rgba(197, 165, 90, 0.06);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--cs-ink, #2a241c);
    font-variant-numeric: tabular-nums;
}

.review-main__chip-sep {
    color: var(--cs-muted, #6c757d);
}

.review-main__chip-total {
    margin-left: auto;
    color: var(--cs-ink, #2a241c);
}

.review-section {
    padding: 0.5rem 0.5rem 0.6rem;
    border-bottom: 1pt solid var(--cs-rule, #e6dfd0);
}

.review-section:last-child {
    border-bottom: none;
}

.review-section--notes {
    padding: 0.85rem 1rem 1rem;
}

.review-section__title {
    margin: 0;
    padding: 0.35rem 0.55rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cs-muted, #6c757d);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.review-section__count {
    font-weight: 500;
    color: var(--cs-ink, #2a241c);
    background-color: rgba(197, 165, 90, 0.18);
    padding: 1pt 6pt;
    border-radius: 999px;
    font-size: 0.7rem;
}

.review-section__missing {
    background-color: var(--cs-amber, #d4a017);
    color: white;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1pt 5pt;
    border-radius: 3px;
    margin-left: 0.35rem;
}

.review-section__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.4rem 0.55rem;
    text-align: left;
    cursor: pointer;
    color: var(--cs-ink, #2a241c);
    transition: background-color 140ms ease;
}

.review-section__toggle:hover {
    background-color: rgba(197, 165, 90, 0.08);
}

.review-section__toggle .review-section__title {
    padding: 0;
    flex-shrink: 0;
}

.review-section__summary {
    flex-grow: 1;
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    color: var(--cs-muted, #6c757d);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.review-section__body {
    padding: 0.5rem 0.85rem 0.85rem;
}

.review-section__notes {
    resize: vertical;
    min-height: 88px;
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
}

/* ── Review summary rail (Step 3 sticky right column) ── */
.review-rail {
    position: relative;
}

@media (min-width: 992px) {
    .review-rail {
        position: sticky;
        top: 1rem;
    }
}

.review-rail__inner {
    background-color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-rule, #e6dfd0);
    border-left: 2pt solid var(--cs-brass, #b89a5e);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    font-family: 'Jost', sans-serif;
}

.review-rail__header {
    display: flex;
    flex-direction: column;
    gap: 2pt;
    padding-bottom: 0.65rem;
    border-bottom: 1pt solid var(--cs-rule, #e6dfd0);
}

.review-rail__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-muted, #6c757d);
}

.review-rail__count {
    font-size: 1rem;
    color: var(--cs-ink, #2a241c);
    font-variant-numeric: tabular-nums;
}

.review-rail__sep {
    color: var(--cs-muted, #6c757d);
    margin: 0 4pt;
}

.review-rail__pricing {
    display: flex;
    flex-direction: column;
    gap: 2pt;
    padding-bottom: 0.65rem;
    border-bottom: 1pt solid var(--cs-rule, #e6dfd0);
    font-variant-numeric: tabular-nums;
}

.review-rail__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--cs-muted, #6c757d);
}

.review-rail__row--surcharge {
    color: var(--cs-amber, #d4a017);
    font-weight: 500;
}

.review-rail__row--total {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--cs-ink, #2a241c);
    padding-top: 5pt;
    border-top: 1pt solid var(--cs-rule, #e6dfd0);
    margin-top: 3pt;
}

.review-rail__details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-rail__field {
    display: flex;
    flex-direction: column;
    gap: 3pt;
    margin: 0;
    font-size: 0.82rem;
}

.review-rail__field > span {
    color: var(--cs-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 600;
}

.review-rail__hint {
    color: var(--cs-muted, #6c757d);
    font-size: 0.72rem;
    margin-top: -2pt;
}

.review-rail__alert {
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    line-height: 1.35;
}

.review-rail__alert--error {
    background-color: rgba(220, 53, 69, 0.08);
    border-left: 3pt solid #dc3545;
    color: #842029;
}

.review-rail__alert--error ul {
    margin: 4pt 0 0 0;
    padding-left: 1.1rem;
}

.review-rail__alert--success {
    background-color: rgba(25, 135, 84, 0.08);
    border-left: 3pt solid #198754;
    color: #0f5132;
}

.review-rail__alert--warning {
    background-color: rgba(255, 193, 7, 0.12);
    border-left: 3pt solid var(--cs-amber, #d4a017);
    color: #664d03;
}

.review-rail__cta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.review-rail__primary {
    background-color: var(--cs-ink, #2a241c);
    color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-ink, #2a241c);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 140ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.review-rail__primary:hover:not(:disabled) {
    background-color: var(--cs-brass, #b89a5e);
    border-color: var(--cs-brass, #b89a5e);
}

.review-rail__primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.review-rail__secondary {
    background: transparent;
    color: var(--cs-muted, #6c757d);
    border: 1pt solid var(--cs-rule, #e6dfd0);
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background-color 140ms ease, color 140ms ease;
}

.review-rail__secondary:hover:not(:disabled) {
    background-color: rgba(197, 165, 90, 0.1);
    color: var(--cs-ink, #2a241c);
}

.review-rail__secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Toast ── */
.orders-flow .brass-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    max-width: 360px;
}

@media (max-width: 767.98px) {
    .orders-flow .brass-toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

.orders-flow .brass-toast {
    background-color: var(--cs-paper);
    border: 1pt solid var(--cs-brass);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: var(--cs-ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(58, 47, 34, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: brass-toast-in 0.25s ease-out;
}

.orders-flow .brass-toast--leaving {
    animation: brass-toast-out 0.2s ease-in forwards;
}

.orders-flow .brass-toast__icon {
    color: var(--cs-brass);
    flex-shrink: 0;
}

.orders-flow .brass-toast__text {
    flex: 1;
    line-height: 1.3;
}

.orders-flow .brass-toast__close {
    background: transparent;
    border: none;
    color: var(--cs-muted);
    cursor: pointer;
    padding: 0.15rem;
    line-height: 1;
}

@keyframes brass-toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes brass-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* ── Completion bloom animation ── */
@keyframes brass-bloom {
    0%   { transform: scale(0.6); filter: drop-shadow(0 0 0 rgba(176, 141, 87, 0)); }
    50%  { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(176, 141, 87, 0.6)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(176, 141, 87, 0)); }
}

.orders-flow .just-completed .bi-check-circle-fill,
.orders-flow .just-completed .shirt-summary-rail__dot,
.orders-flow .just-completed .ps-tab-group__check,
.orders-flow .just-completed .ps-subpill__check {
    animation: brass-bloom 0.4s ease-out;
    color: var(--cs-brass);
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .orders-flow * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Two-column configurator layout ── */
@media (min-width: 992px) {
    .orders-flow .shirt-configurator-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        gap: 1.25rem;
        align-items: start;
    }
}

/* ── Mobile summary strip ── */
.orders-flow .shirt-summary-rail-mobile {
    background-color: var(--cs-paper);
    border: 1pt solid var(--cs-rule);
    border-radius: 4px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
}

.orders-flow .shirt-summary-rail-mobile__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--cs-deep);
}

.orders-flow .shirt-summary-rail-mobile__count {
    font-size: 0.72rem;
    color: var(--cs-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.orders-flow .shirt-summary-rail-mobile__body {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1pt solid var(--cs-rule);
}

/* ── Preview/visualizer pass-through ──
   The Easy Designer live preview (.designer-stage) and the shared ShirtVisualizer
   render their own backgrounds, SVG, and images. Don't let the brand layer touch
   them — make sure nothing inherits a paper background, unexpected filter, or
   dropped opacity from card overrides. */
.orders-flow .designer-stage,
.orders-flow .designer-stage__body,
.orders-flow .designer-stage__caption,
.orders-flow .shirt-visualizer,
.orders-flow .shirt-visualizer__cuff-zoom,
.orders-flow .fabric-thread-visualizer {
    background: revert;
    color: revert;
    font-family: revert;
    font-style: revert;
    font-weight: revert;
}

.orders-flow .designer-stage img,
.orders-flow .designer-stage svg,
.orders-flow .designer-stage canvas {
    display: revert;
    opacity: 1;
    visibility: visible;
}

/* ── Dark mode overrides ──
   The app's theme toggle sets [data-theme="dark"] on <html>. The brand layer's
   cream/parchment palette is baked in for light mode; here we remap the same
   CSS variables to the dark atelier palette so cards, form controls, tables,
   and pills stay legible in dark mode without duplicating every rule. */
[data-theme="dark"] .orders-flow,
[data-theme="dark"] .cart-pill-container,
[data-theme="dark"] .cart-pill__backdrop {
    --cs-brass: #d9b679;
    --cs-brass-2: #e4c68c;
    --cs-deep: #f4ecd9;
    --cs-ink: #ece5d1;
    --cs-ink-2: #d6ccb5;
    --cs-paper: #1a1410;
    --cs-rule: #4a4136;
    --cs-muted: #ada28d;
    --cs-amber: #e2b95a;
    --cs-green: #9ac290;
}

[data-theme="dark"] .orders-flow .card {
    background-color: #1f1a14;
    border-color: #3d342a;
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.04), 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .orders-flow .card.bg-light {
    background-color: #1f1a14 !important;
}

[data-theme="dark"] .orders-flow .card-header {
    color: var(--cs-deep);
    border-bottom-color: #3d342a;
}

[data-theme="dark"] .orders-flow .card.border-primary > .card-header,
[data-theme="dark"] .orders-flow .card-header.bg-primary {
    background-color: #241d15 !important;
    border-bottom-color: var(--cs-brass);
}

[data-theme="dark"] .orders-flow .card-header.bg-primary-subtle,
[data-theme="dark"] .orders-flow .card-header.bg-info,
[data-theme="dark"] .orders-flow .card-header.bg-info.bg-opacity-10 {
    background-color: rgba(201, 166, 107, 0.06) !important;
}

[data-theme="dark"] .orders-flow .form-control,
[data-theme="dark"] .orders-flow .form-select {
    background-color: #15100c;
    border-color: #3d342a;
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .form-control:focus,
[data-theme="dark"] .orders-flow .form-select:focus {
    background-color: #15100c;
    border-color: var(--cs-brass);
    color: var(--cs-ink);
    box-shadow: 0 0 0 0.2rem rgba(201, 166, 107, 0.18);
}

[data-theme="dark"] .orders-flow .input-group-text {
    background-color: rgba(201, 166, 107, 0.08);
    border-color: #3d342a;
    color: var(--cs-ink-2);
}

[data-theme="dark"] .orders-flow .alert-info,
[data-theme="dark"] .orders-flow .alert-primary {
    background-color: rgba(201, 166, 107, 0.08);
    border-color: var(--cs-brass);
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .alert-warning {
    background-color: rgba(212, 168, 74, 0.08);
    border-color: var(--cs-amber);
    color: var(--cs-amber);
}

[data-theme="dark"] .orders-flow .alert-success {
    background-color: rgba(123, 166, 113, 0.08);
    border-color: var(--cs-green);
    color: var(--cs-green);
}

[data-theme="dark"] .orders-flow .alert-danger {
    background-color: rgba(200, 80, 70, 0.1);
    color: #f2b8b2;
}

[data-theme="dark"] .orders-flow .shirt-summary-rail,
[data-theme="dark"] .orders-flow .shirt-summary-rail-mobile,
[data-theme="dark"] .orders-flow .brass-toast {
    background-color: #1f1a14;
    border-color: #3d342a;
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .ps-subpills {
    background-color: rgba(201, 166, 107, 0.05);
    border-bottom-color: #3d342a;
}

[data-theme="dark"] .orders-flow .ps-subpill,
[data-theme="dark"] .orders-flow .ps-meas-chip {
    border-color: #3d342a;
    color: var(--cs-ink-2);
}

[data-theme="dark"] .orders-flow .ps-subpill.active,
[data-theme="dark"] .orders-flow .ps-meas-chip.active {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: #1a1410;
}

[data-theme="dark"] .orders-flow .btn-outline-secondary {
    border-color: #3d342a;
    color: var(--cs-ink-2);
}

[data-theme="dark"] .orders-flow .btn-outline-secondary:hover {
    background-color: #3d342a;
    color: var(--cs-deep);
}

[data-theme="dark"] .orders-flow .btn-primary,
[data-theme="dark"] .orders-flow .btn-gold {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: #1a1410;
}

[data-theme="dark"] .orders-flow .btn-primary:hover,
[data-theme="dark"] .orders-flow .btn-gold:hover {
    background-color: var(--cs-brass-2);
    border-color: var(--cs-brass-2);
    color: #1a1410;
}

[data-theme="dark"] .orders-flow .badge.bg-light.text-dark {
    background-color: #1f1a14 !important;
    color: var(--cs-ink) !important;
    border-color: #3d342a;
}

[data-theme="dark"] .orders-flow h5.border-bottom {
    border-bottom-color: #3d342a !important;
}

[data-theme="dark"] .orders-flow .table {
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .table > :not(caption) > * > * {
    border-color: #3d342a;
}

[data-theme="dark"] .orders-flow .table-warning {
    background-color: rgba(212, 168, 74, 0.08) !important;
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .ps-accordion-group-header {
    border-bottom-color: #3d342a;
}

[data-theme="dark"] .orders-flow .shirt-summary-rail__row {
    border-bottom-color: #3d342a;
}

[data-theme="dark"] .orders-flow .shirt-summary-rail__row:hover {
    background-color: rgba(201, 166, 107, 0.06);
}

[data-theme="dark"] .orders-flow .shirt-summary-rail__dot {
    border-color: #4a4136;
}

/* ── Dark-mode text contrast catch-all ──
   Anything that was tinted with --cs-brass-2, --cs-muted, or a hardcoded dark
   accent in light mode needs a lift in dark mode so it reads against the near-
   black paper background. These are targeted lifts, not a blanket override. */
[data-theme="dark"] .orders-flow,
[data-theme="dark"] .orders-flow p,
[data-theme="dark"] .orders-flow li,
[data-theme="dark"] .orders-flow span,
[data-theme="dark"] .orders-flow label,
[data-theme="dark"] .orders-flow dt,
[data-theme="dark"] .orders-flow dd,
[data-theme="dark"] .orders-flow td,
[data-theme="dark"] .orders-flow th {
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow h2,
[data-theme="dark"] .orders-flow h3,
[data-theme="dark"] .orders-flow h4,
[data-theme="dark"] .orders-flow h5,
[data-theme="dark"] .orders-flow h6,
[data-theme="dark"] .orders-flow .card-header h4,
[data-theme="dark"] .orders-flow .card-header h5,
[data-theme="dark"] .orders-flow .card-header h6,
[data-theme="dark"] .orders-flow strong,
[data-theme="dark"] .orders-flow b {
    color: var(--cs-deep);
}

[data-theme="dark"] .orders-flow .form-label,
[data-theme="dark"] .orders-flow .form-label.fw-semibold {
    color: var(--cs-ink-2);
}

[data-theme="dark"] .orders-flow .text-muted,
[data-theme="dark"] .orders-flow small.text-muted,
[data-theme="dark"] .orders-flow .small.text-muted {
    color: var(--cs-muted) !important;
}

[data-theme="dark"] .orders-flow .text-primary {
    color: var(--cs-brass) !important;
}

[data-theme="dark"] .orders-flow .text-secondary {
    color: var(--cs-ink-2) !important;
}

[data-theme="dark"] .orders-flow .text-dark {
    color: var(--cs-deep) !important;
}

[data-theme="dark"] .orders-flow .text-body,
[data-theme="dark"] .orders-flow .text-body-secondary {
    color: var(--cs-ink) !important;
}

[data-theme="dark"] .orders-flow .text-warning {
    color: var(--cs-amber) !important;
}

[data-theme="dark"] .orders-flow .text-success {
    color: var(--cs-green) !important;
}

[data-theme="dark"] .orders-flow .text-info {
    color: var(--cs-brass-2) !important;
}

[data-theme="dark"] .orders-flow .text-danger {
    color: #f2b8b2 !important;
}

[data-theme="dark"] .orders-flow a {
    color: var(--cs-brass-2);
}

[data-theme="dark"] .orders-flow a:hover {
    color: var(--cs-deep);
}

[data-theme="dark"] .orders-flow .ps-accordion-group-header {
    color: var(--cs-brass-2);
}

[data-theme="dark"] .orders-flow .ps-tab-group {
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .ps-tab-group.active {
    color: var(--cs-deep);
}

[data-theme="dark"] .orders-flow .ps-tab-group:hover {
    color: var(--cs-brass-2);
}

[data-theme="dark"] .orders-flow .ps-subpill,
[data-theme="dark"] .orders-flow .ps-meas-chip {
    color: var(--cs-ink-2);
}

[data-theme="dark"] .orders-flow .ps-subpill.active,
[data-theme="dark"] .orders-flow .ps-meas-chip.active {
    color: #1a1410;
}

[data-theme="dark"] .orders-flow .shirt-summary-rail__label,
[data-theme="dark"] .orders-flow .shirt-summary-rail__count,
[data-theme="dark"] .orders-flow .shirt-summary-rail-mobile__count {
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .card-header,
[data-theme="dark"] .orders-flow .card-header strong {
    color: var(--cs-deep);
}

[data-theme="dark"] .orders-flow .card-header.bg-primary {
    color: var(--cs-deep) !important;
}

/* Fabric-thread visualizer: collar & cuff render in place — no fly-in.
   The wrapper classes are kept as semantic hooks but carry no animation. */
.ftv-collar-anim,
.ftv-cuff-anim {
    transform-box: fill-box;
}

/* ── Dark-mode contrast fixes for the cart pill, panel, review grid, and rail.
   The atelier variables are remapped on .orders-flow / .cart-pill-container
   above; this block fixes the secondary surfaces, alerts, and form controls
   that don't auto-adapt from the variables alone. */
[data-theme="dark"] .cart-pill {
    background-color: #241d15;
    border-color: var(--cs-brass);
    color: var(--cs-ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 1pt 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .cart-pill__chip {
    border-color: #241d15;
}

[data-theme="dark"] .cart-pill__chip--more {
    background-color: var(--cs-brass);
    color: #1a1410;
}

[data-theme="dark"] .cart-pill__sep,
[data-theme="dark"] .cart-pill__chevron {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-panel {
    background-color: #1f1a14;
    border-color: var(--cs-brass);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 2pt 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .cart-panel__header {
    border-bottom-color: var(--cs-rule);
}

[data-theme="dark"] .cart-panel__header h2 {
    color: var(--cs-deep);
}

[data-theme="dark"] .cart-panel__count {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-panel__count-price {
    color: var(--cs-ink);
}

[data-theme="dark"] .cart-panel__close {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-panel__close:hover {
    background-color: rgba(217, 182, 121, 0.12);
    color: var(--cs-ink);
}

[data-theme="dark"] .cart-panel__footer {
    background-color: #18130e;
    border-top-color: var(--cs-rule);
}

[data-theme="dark"] .cart-panel__priority span {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-panel__priority select {
    background-color: #241d15;
    border-color: var(--cs-rule);
    color: var(--cs-ink);
}

[data-theme="dark"] .cart-panel__pricing-row {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-panel__pricing-row--total {
    color: var(--cs-ink);
    border-top-color: var(--cs-rule);
}

[data-theme="dark"] .cart-panel__cta {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: #1a1410;
}

[data-theme="dark"] .cart-panel__cta:hover:not(:disabled) {
    background-color: var(--cs-brass-2);
    border-color: var(--cs-brass-2);
}

/* Compact list inside the panel (and the Step 3 main column). The
   .orders-flow scope already remaps vars for the Step 3 case, but the
   pill-panel rendering is outside that scope, so explicitly set surface
   contrast here for the dark mode. */
[data-theme="dark"] .cart-compact-row {
    border-bottom-color: var(--cs-rule);
}

[data-theme="dark"] .cart-compact-row:hover {
    background-color: rgba(217, 182, 121, 0.08);
}

[data-theme="dark"] .cart-compact-row.has-missing {
    background-color: rgba(248, 113, 113, 0.10);
}

[data-theme="dark"] .cart-compact-row__chip {
    background-color: #241d15;
    border-color: var(--cs-rule);
}

[data-theme="dark"] .cart-compact-row__chip-initials {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-compact-row__name {
    color: var(--cs-ink);
}

[data-theme="dark"] .cart-compact-row__meta,
[data-theme="dark"] .cart-compact-row__qty {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-compact-row__total {
    color: var(--cs-ink);
}

[data-theme="dark"] .cart-compact-row__missing {
    color: #f8a5a5;
    background-color: rgba(248, 113, 113, 0.14);
}

[data-theme="dark"] .cart-compact-row__incomplete {
    color: var(--cs-amber);
}

[data-theme="dark"] .cart-compact-row__btn {
    color: var(--cs-muted);
}

[data-theme="dark"] .cart-compact-row__btn:hover {
    background-color: rgba(217, 182, 121, 0.14);
    color: var(--cs-ink);
}

[data-theme="dark"] .cart-compact-row__btn--danger:hover {
    background-color: rgba(248, 113, 113, 0.14);
    color: #f8a5a5;
}

[data-theme="dark"] .cart-compact-empty {
    color: var(--cs-muted);
}

/* Step 3 review grid surfaces */
[data-theme="dark"] .orders-flow .review-main {
    background-color: #1f1a14;
    border-color: var(--cs-rule);
}

[data-theme="dark"] .orders-flow .review-main__header {
    background-color: #241d15;
    border-bottom-color: var(--cs-rule);
}

[data-theme="dark"] .orders-flow .review-main__header h4 {
    color: var(--cs-deep);
}

[data-theme="dark"] .orders-flow .review-main__chip {
    background-color: rgba(217, 182, 121, 0.12);
    border-bottom-color: var(--cs-rule);
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .review-main__chip-sep {
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .review-section {
    border-bottom-color: var(--cs-rule);
}

[data-theme="dark"] .orders-flow .review-section__title {
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .review-section__count {
    background-color: rgba(217, 182, 121, 0.22);
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .review-section__toggle {
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .review-section__toggle:hover {
    background-color: rgba(217, 182, 121, 0.10);
}

[data-theme="dark"] .orders-flow .review-section__summary {
    color: var(--cs-muted);
}

/* Sticky review summary rail */
[data-theme="dark"] .orders-flow .review-rail__inner {
    background-color: #1f1a14;
    border-color: var(--cs-rule);
    border-left-color: var(--cs-brass);
}

[data-theme="dark"] .orders-flow .review-rail__header {
    border-bottom-color: var(--cs-rule);
}

[data-theme="dark"] .orders-flow .review-rail__eyebrow,
[data-theme="dark"] .orders-flow .review-rail__sep,
[data-theme="dark"] .orders-flow .review-rail__hint {
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .review-rail__count {
    color: var(--cs-ink);
}

[data-theme="dark"] .orders-flow .review-rail__pricing {
    border-bottom-color: var(--cs-rule);
}

[data-theme="dark"] .orders-flow .review-rail__row {
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .review-rail__row--total {
    color: var(--cs-ink);
    border-top-color: var(--cs-rule);
}

[data-theme="dark"] .orders-flow .review-rail__field > span {
    color: var(--cs-muted);
}

/* Alerts — light backgrounds + dark text become unreadable in dark mode.
   Swap to higher-contrast tinted backgrounds with light text. */
[data-theme="dark"] .orders-flow .review-rail__alert--error {
    background-color: rgba(248, 113, 113, 0.14);
    border-left-color: #ef6b6b;
    color: #fbcaca;
}

[data-theme="dark"] .orders-flow .review-rail__alert--success {
    background-color: rgba(154, 194, 144, 0.14);
    border-left-color: var(--cs-green);
    color: #c8e0bf;
}

[data-theme="dark"] .orders-flow .review-rail__alert--warning {
    background-color: rgba(226, 185, 90, 0.14);
    border-left-color: var(--cs-amber);
    color: #f0d590;
}

[data-theme="dark"] .orders-flow .review-rail__primary {
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    color: #1a1410;
}

[data-theme="dark"] .orders-flow .review-rail__primary:hover:not(:disabled) {
    background-color: var(--cs-brass-2);
    border-color: var(--cs-brass-2);
}

[data-theme="dark"] .orders-flow .review-rail__secondary {
    background: transparent;
    border-color: var(--cs-rule);
    color: var(--cs-muted);
}

[data-theme="dark"] .orders-flow .review-rail__secondary:hover:not(:disabled) {
    background-color: rgba(217, 182, 121, 0.10);
    color: var(--cs-ink);
}

/* Form controls inside the rail (Bootstrap form-select / form-control)
   defer to the existing .orders-flow dark rules higher up, but the date
   input in particular needs its calendar icon to remain visible. */
[data-theme="dark"] .orders-flow .review-rail__field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

/* ── Step 1 Style Plan strip (replaces full-width Load Previous + Apply alert) ── */
.orders-flow .style-plan-strip {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.55rem 0.65rem;
    background-color: rgba(176, 141, 87, 0.05);
    border: 1pt solid var(--cs-rule, #e6dfd0);
    border-left: 3pt solid var(--cs-brass, #b08d57);
    border-radius: 4px;
}

.orders-flow .style-plan-strip__chips {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2pt;
}

.orders-flow .style-plan-strip__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: var(--cs-paper, #faf6ed);
    border: 1pt solid var(--cs-rule, #e6dfd0);
    /* Softer rectangle so the rectangular fabric swatch on the left sits
       cleanly inside the chip — a 999px pill clipped square thumbnails. */
    border-radius: 12px;
    padding: 0.3rem 0.75rem 0.3rem 0.35rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    color: var(--cs-ink, #2a241c);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    max-width: 18rem;
}

.orders-flow .style-plan-strip__chip:hover {
    border-color: var(--cs-brass, #b08d57);
    background-color: rgba(176, 141, 87, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.orders-flow .style-plan-strip__chip-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(176, 141, 87, 0.08);
    color: var(--cs-brass, #b08d57);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1pt solid var(--cs-rule, #e6dfd0);
}

.orders-flow .style-plan-strip__chip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.orders-flow .style-plan-strip__chip-thumb-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    line-height: 1;
    border: 1.5pt solid var(--cs-paper, #faf6ed);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.orders-flow .style-plan-strip__chip-thumb-badge--ok {
    background-color: var(--cs-brass, #b08d57);
    color: var(--cs-paper, #faf6ed);
}

.orders-flow .style-plan-strip__chip-thumb-badge--pending {
    background-color: var(--cs-amber, #d4a017);
    color: #fff;
}

.orders-flow .style-plan-strip__chip.is-active .style-plan-strip__chip-thumb {
    border-color: rgba(255, 255, 255, 0.5);
}

.orders-flow .style-plan-strip__chip.is-active .style-plan-strip__chip-thumb-badge {
    border-color: var(--cs-brass, #b08d57);
}

.orders-flow .style-plan-strip__chip.is-styled {
    border-color: var(--cs-brass, #b08d57);
}

.orders-flow .style-plan-strip__chip.is-pending {
    border-color: var(--cs-amber, #d4a017);
    background-color: rgba(212, 160, 23, 0.06);
}

.orders-flow .style-plan-strip__chip.is-active {
    background-color: var(--cs-brass, #b08d57);
    border-color: var(--cs-brass, #b08d57);
    color: var(--cs-paper, #faf6ed);
}

.orders-flow .style-plan-strip__chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(176, 141, 87, 0.15);
    color: var(--cs-brass, #b08d57);
    font-size: 10pt;
    line-height: 1;
}

.orders-flow .style-plan-strip__chip.is-styled .style-plan-strip__chip-mark {
    background-color: var(--cs-brass, #b08d57);
    color: var(--cs-paper, #faf6ed);
}

.orders-flow .style-plan-strip__chip.is-pending .style-plan-strip__chip-mark {
    background-color: rgba(212, 160, 23, 0.15);
    color: var(--cs-amber, #d4a017);
}

.orders-flow .style-plan-strip__chip.is-active .style-plan-strip__chip-mark {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--cs-paper, #faf6ed);
}

.orders-flow .style-plan-strip__chip-num {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.85;
}

.orders-flow .style-plan-strip__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.orders-flow .style-plan-strip__chip-state {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-amber, #d4a017);
    margin-left: 0.25rem;
    flex: 0 0 auto;
}

.orders-flow .style-plan-strip__chip.is-active .style-plan-strip__chip-state {
    color: rgba(255, 255, 255, 0.9);
}

.orders-flow .style-plan-strip__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1pt dashed var(--cs-rule, #e6dfd0);
}

.orders-flow .style-plan-strip__apply {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.orders-flow .style-plan-strip__apply select {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
}

@media (max-width: 575.98px) {
    .orders-flow .style-plan-strip__apply {
        margin-left: 0;
        width: 100%;
    }
    .orders-flow .style-plan-strip__apply select {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* ── Step Action Bar (sticky bottom on md+, hidden on phones where the
   existing .d-md-none .fixed-bottom mobile bar already handles step nav) ── */
.step-action-bar {
    display: none;
}

@media (min-width: 768px) {
    .step-action-bar {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 1020;
        background-color: var(--cs-paper, #faf6ed);
        border-top: 1pt solid var(--cs-rule, #e6dfd0);
        box-shadow: 0 -4px 16px rgba(58, 47, 34, 0.08);
        backdrop-filter: blur(6px);
        margin-top: 1.25rem;
    }
}

.step-action-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.65rem 1.25rem;
    font-family: 'Jost', sans-serif;
}

.step-action-bar__back,
.step-action-bar__next {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1pt solid var(--cs-rule, #e6dfd0);
    background-color: transparent;
    color: var(--cs-ink, #2a241c);
    padding: 0.55rem 1rem;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.step-action-bar__back:hover:not(:disabled) {
    background-color: rgba(176, 141, 87, 0.08);
    border-color: var(--cs-brass, #b08d57);
}

.step-action-bar__next {
    background-color: var(--cs-ink, #2a241c);
    color: var(--cs-paper, #faf6ed);
    border-color: var(--cs-ink, #2a241c);
}

.step-action-bar__next:hover:not(:disabled) {
    background-color: var(--cs-brass, #b08d57);
    border-color: var(--cs-brass, #b08d57);
}

.step-action-bar__back:disabled,
.step-action-bar__next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.step-action-bar__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1pt;
    text-align: center;
    color: var(--cs-ink, #2a241c);
    font-variant-numeric: tabular-nums;
}

.step-action-bar__status-line {
    font-size: 0.95rem;
}

.step-action-bar__sep {
    color: var(--cs-muted, #6c757d);
    margin: 0 4pt;
}

.step-action-bar__status-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-muted, #6c757d);
}

.step-action-bar__status-sub .bi-check-circle {
    color: var(--cs-green, #198754);
}

/* ── MeasurementInput inline focus hint (CSS-only :focus-within) ── */
.meas-input {
    display: contents;
}

.meas-input--has-hint .meas-input__focus-hint {
    display: none;
    margin-top: 1pt;
    padding: 5pt 8pt;
    border-left: 2pt solid var(--cs-brass, #b08d57);
    background-color: rgba(176, 141, 87, 0.06);
    color: var(--cs-ink, #2a241c);
    font-size: 0.78rem;
    line-height: 1.4;
    border-radius: 0 3px 3px 0;
}

.meas-input--has-hint:focus-within .meas-input__focus-hint {
    display: block;
    animation: meas-hint-fade 160ms ease-out;
}

@keyframes meas-hint-fade {
    from { opacity: 0; transform: translateY(-2pt); }
    to   { opacity: 1; transform: translateY(0); }
}