/* Kumaas — order tracking */
.track { display: grid; gap: var(--sp-6); max-width: 760px; padding-block: var(--sp-6) var(--sp-8); }
.track__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-4); align-items: end; padding: var(--sp-5); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); }
.track__form .btn { min-height: 48px; }
.track__form .field__error { min-height: 0; }
.track__form .msg { grid-column: 1 / -1; }
@media (max-width: 640px) { .track__form { grid-template-columns: 1fr; } }
.msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.msg:empty { display: none; }
.msg--error { background: #fdf1f1; color: var(--c-error); border: 1px solid #f0caca; }

.tcard { padding: var(--sp-5); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); display: grid; gap: var(--sp-5); }
.tcard__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.tcard__head h2 { font-size: var(--fs-lg); }
.tcard__head p { color: var(--c-muted); font-size: var(--fs-sm); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; position: relative; }
.steps li { position: relative; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.steps li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--c-line); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-line); font-weight: 600; }
.steps li.done { color: var(--c-wine); }
.steps li.done::before { background: var(--c-burgundy); }
.steps li.done .dot { background: var(--c-burgundy); border-color: var(--c-burgundy); color: var(--c-ivory); }
.steps li.current .dot { box-shadow: 0 0 0 4px var(--c-blush-soft); }
.steps strong { font-size: var(--fs-sm); }
.cancelled-note { padding: var(--sp-4); border-radius: var(--radius-sm); background: #f3e8e8; color: #8a2b2b; font-size: var(--fs-sm); }

.titems { display: grid; gap: var(--sp-3); list-style: none; }
.titem { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.titem img, .titem .ph { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--c-cream); }
.titem .meta { color: var(--c-muted); font-size: var(--fs-xs); }
.tsum { display: grid; grid-template-columns: 1fr auto; row-gap: var(--sp-2); margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.tsum dt { color: var(--c-muted); }
.tsum dd { margin: 0; padding-left: var(--sp-4); text-align: right; font-weight: 500; }
.tsum .total { padding-top: var(--sp-2); border-top: 1px solid var(--c-line); font-weight: 600; font-size: var(--fs-md); color: var(--c-text); }