/* Track your order page. Loaded only there (inc/track-order.php), so it skips the SCSS build and its purge. */
.bb-track { padding-block: 16px 48px; }
.bb-track__box { display: grid; gap: 16px; max-width: 460px; margin-inline: auto; }
.bb-track h1:not(.visually-hidden) { margin: 0; }
.bb-track__lede, .bb-track__help { margin: 0; color: var(--mute, #625F70); }
.bb-track__help { font-size: 13px; }
.bb-track__field { display: grid; gap: 6px; }
.bb-track__field label { font-weight: 600; font-size: 13px; }
.bb-track__field input { width: 100%; box-sizing: border-box; padding: 12px; font-size: 16px; color: var(--ink, #15131A); background: #fff; border: 1px solid var(--line-2, #D6CFDD); border-radius: 10px; }
.bb-track__field input:focus-visible, .bb-track button:focus-visible { outline: 2px solid var(--ink, #15131A); outline-offset: 2px; }
body .bb-track button { width: 100%; padding: 14px; font-weight: 600; font-size: 16px; color: #fff; background: var(--ink, #15131A); border: 0; border-radius: 999px; cursor: pointer; }
.bb-track__trap { position: absolute; left: -9999px; }
.bb-track__err { margin: 0; padding: 12px; font-size: 14px; color: var(--sale-deep, #B91C1C); background: var(--sale-soft, #FEE2E2); border-radius: 10px; }
.bb-track__closed { margin: 0; padding: 12px; font-size: 14px; color: var(--ink, #15131A); background: var(--soft, #F8F6FA); border-radius: 10px; }
.bb-track__status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.bb-track__status strong { font-family: var(--f-display, inherit); font-size: 20px; }
.bb-track__pill { padding: 3px 10px; font-weight: 600; font-size: 12px; color: var(--success-ink, #0A6B48); background: var(--success-soft, #DCF5E8); border-radius: 999px; }
.bb-track__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.bb-track__steps li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-bottom: 18px; }
.bb-track__steps li:last-child { padding-bottom: 0; }
.bb-track__steps li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line-2, #D6CFDD); }
.bb-track__steps li.is-done:not(:last-child)::before { background: var(--success, #0EA371); }
.bb-track__dot { display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; font-size: 13px; line-height: 1; color: #fff; background: #fff; border: 2px solid var(--line-2, #D6CFDD); border-radius: 50%; }
.is-done .bb-track__dot { background: var(--success, #0EA371); border-color: var(--success, #0EA371); }
.is-now .bb-track__dot { border-color: var(--ink, #15131A); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px var(--ink, #15131A); }
.bb-track__steps b { display: block; font-weight: 600; }
.bb-track__steps span:not(.bb-track__dot) { font-size: 13px; color: var(--mute, #625F70); }
.is-later b { font-weight: 500; color: var(--mute, #625F70); }
.bb-track__items { display: grid; gap: 6px; padding: 12px; font-size: 14px; background: var(--soft, #F8F6FA); border-radius: 12px; }
.bb-track__items > div { display: flex; justify-content: space-between; gap: 12px; }
.bb-track__total { padding-top: 6px; font-weight: 600; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line, #E6E1EA); }