.mgk-track { --mgk-track-blue: #1363FF; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1016px; margin-inline: auto; font-family: 'Quicksand', var(--mgk-font); }

.mgk-track .mgk-track__back { align-self: flex-start; margin-bottom: 0; }

.mgk-track__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mgk-track__head-main { min-width: 0; }
.mgk-track__heading { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--mgk-navy); margin: 0; }
.mgk-track__heading--mobile { display: none; }
.mgk-track__order { font-size: 14px; line-height: 20px; color: var(--mgk-text-3); margin: 0; }

.mgk-track__status { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--mgk-bg-alt); color: var(--mgk-text-2); }

.mgk-timeline--track .mgk-timeline__icon { display: none; }
.mgk-timeline--track .mgk-timeline__description { display: none; }

.mgk-track__cols { display: grid; grid-template-columns: minmax(0, 585fr) minmax(0, 408fr); gap: 24px; align-items: stretch; }
.mgk-track__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; min-height: 0; }
.mgk-track__cols .mgk-card { border-radius: 16px; padding: 20px; }

.mgk-track__items-card { padding: 22px; gap: 13px; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }

.mgk-track__sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mgk-track__sum-title { font-size: 17px; line-height: 21px; font-weight: 700; color: var(--mgk-navy-900); margin: 0; }
.mgk-track__sum-count { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--mgk-track-blue); }

.mgk-track__items { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mgk-track__sum-head,
.mgk-track__sum-sep,
.mgk-track__sum-foot { flex-shrink: 0; }

.mgk-track__item { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0; min-height: 68px; flex-shrink: 0; }
.mgk-track__item-img { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #F4F6F9; flex-shrink: 0; }

body .mgk-track__item-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

.mgk-track__item-img a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.mgk-track__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mgk-track__item-name { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--mgk-navy-900); margin: 0; }
.mgk-track__item-name-link { color: inherit; text-decoration: none; }
.mgk-track__item-name-link:hover { text-decoration: underline; }
.mgk-track__item-note { display: block; font-size: 12px; line-height: 16px; color: var(--mgk-amber); margin: 0; }
.mgk-track__item-meta { display: none; }
.mgk-track__item-note--oos { display: none; color: var(--mgk-red); font-weight: 600; }
.mgk-track__item-note--sale { color: var(--mgk-red); font-weight: 600; }

.mgk-track__item-right { display: flex; flex-direction: column; align-items: flex-end; align-self: center; gap: 4px; flex-shrink: 0; }
.mgk-track__item-qty { font-size: 14px; line-height: 20px; font-weight: 500; color: #A1A1A1; }
.mgk-track__item-price { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--mgk-navy-900); white-space: nowrap; }
.mgk-track__item-review { display: none; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--mgk-track-blue); text-decoration: none; white-space: nowrap; }
.mgk-track__item-review:hover { text-decoration: underline; }
.mgk-track__item.has-mgk-item-oos .mgk-track__item-note--oos { display: block; }
.mgk-track__item.has-mgk-item-oos .mgk-track__item-review { display: inline-block; }
.mgk-track__item.has-mgk-item-oos .mgk-track__item-price { display: none; }

.mgk-track__sum-sep { height: 1px; background: #EFF2F6; }
.mgk-track__sum-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 12px 0; }
.mgk-track__sum-labels,
.mgk-track__sum-values { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mgk-track__sum-values { align-items: flex-end; text-align: right; }
.mgk-track__sum-paylabel { font-size: 12px; line-height: 16px; color: #A1A1A1; }
.mgk-track__sum-payval { font-size: 12px; line-height: 16px; font-weight: 500; color: #0A0A0A; }
.mgk-track__sum-totlabel { font-size: 15.5px; line-height: 19px; font-weight: 700; color: var(--mgk-navy-900); }
.mgk-track__sum-totval { font-size: 17px; line-height: 21px; font-weight: 700; color: var(--mgk-navy-900); }

.mgk-track__estimate { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--mgk-text-3); margin: 0; }

.mgk-track__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.mgk-track__act { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid var(--mgk-track-blue); border-radius: 8px; background: transparent; color: var(--mgk-track-blue); font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mgk-track__act:hover { background: rgba(19,99,255,.06); color: var(--mgk-track-blue); }
.mgk-track__act-icon,
.mgk-track__act-chevron { display: none; }

@media (max-width: 980px) {
	.mgk-track__cols { grid-template-columns: 1fr; }
	.mgk-track__actions { justify-content: flex-start; }

	.mgk-track__col--aside { min-height: auto; }
	.mgk-track__items-card { flex: 0 0 auto; min-height: auto; }
	.mgk-track__items { flex: 0 0 auto; min-height: auto; overflow: visible; }
}
@media (max-width: 480px) {

	.mgk-track__actions { flex-wrap: wrap; }
	.mgk-track__act { flex: 1 1 100%; }
}

@media (max-width: 640px) {
	body:has(.mgk-track) { background: #F7F9FD; }
	.mgk-section.mgk-track {
		align-items: stretch; width: 100%; max-width: none; min-height: calc(100dvh - 52px);
		box-sizing: border-box; padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 0px));
		gap: 18px; background: #F7F9FD;
	}
	.mgk-track__head { align-items: center; gap: 12px; }
	.mgk-track__heading { font-size: 20px; line-height: 26px; }
	.mgk-track__heading--desktop,
	.mgk-track__order,
	.mgk-track__back { display: none; }
	.mgk-track__heading--mobile { display: block; }
	.mgk-track__status {
		padding: 0; border-radius: 0; font-size: 12px; line-height: 20px;
		background: transparent !important; color: #C17A29;
	}
	.mgk-track__cols { display: flex; flex-direction: column; gap: 18px; }
	.mgk-track__cols .mgk-card { padding: 18px; border-radius: 17px; }
	.mgk-track__progress-card { order: 0; }
	.mgk-track__col--aside { gap: 18px; }
	.mgk-track__items-card { order: 0; flex: 0 0 auto; min-height: auto; gap: 14px; }
	.mgk-track__items { flex: 0 0 auto; min-height: 0; overflow: visible; }
	.mgk-track__item {
		min-height: 76px; gap: 12px; padding: 10px 0;
		border-bottom: 1px solid #E7EDF5;
	}
	.mgk-track__item:first-child { padding-top: 0; }
	.mgk-track__item:last-child { padding-bottom: 0; border-bottom: 0; }
	.mgk-track__item-img { width: 58px; height: 58px; border-radius: 8px; }
	.mgk-track__item-body { gap: 2px; }
	.mgk-track__item-name { font-size: 14px; line-height: 20px; font-weight: 700; }
	.mgk-track__item-meta {
		display: block; margin: 0; font-size: 12px; line-height: 17px;
		font-weight: 500; color: #8FA4C2;
	}
	.mgk-track__item-note { line-height: 17px; }
	.mgk-track__item-right { gap: 0; padding-top: 0; }
	.mgk-track__item-qty { display: none; }
	.mgk-track__item-price { font-size: 14px; line-height: 20px; font-weight: 700; }
	.mgk-track__sum-count { color: #9AAAC0; font-weight: 500; }
	.mgk-track__sum-foot { padding: 12px 0 0; }

	.mgk-track__sum-foot {
		display: grid; grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto; align-items: baseline;
		column-gap: 16px; row-gap: 4px;
	}
	.mgk-track__sum-labels,
	.mgk-track__sum-values { display: contents; }

	.mgk-track__sum-paylabel { grid-column: 1; grid-row: 1; text-align: left; font-size: 11px; line-height: 15px; font-weight: 500; color: #9AAAC0; }
	.mgk-track__sum-payval { grid-column: 2; grid-row: 1; text-align: right; font-size: 11px; line-height: 15px; font-weight: 500; color: #9AAAC0; }
	.mgk-track__sum-totlabel { grid-column: 1; grid-row: 2; text-align: left; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--mgk-navy-900); }
	.mgk-track__sum-totval { grid-column: 2; grid-row: 2; text-align: right; font-size: 18px; line-height: 22px; }

	.mgk-track__actions {
		flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
		background: #fff; border: 1px solid #E1E8F1; border-radius: 17px;
		overflow: hidden;
	}
	.mgk-track__act {
		width: 100%; flex: 0 0 auto; min-height: 56px; padding: 0 16px;
		border: 0; border-radius: 0; background: #fff; color: var(--mgk-navy);
		justify-content: flex-start; gap: 14px; text-align: left; font-weight: 500;
	}
	.mgk-track__act + .mgk-track__act { border-top: 1px solid #E9EEF5; }
	.mgk-track__act:hover { background: #F8FAFD; color: var(--mgk-navy); }
	.mgk-track__act:focus-visible { outline: 2px solid var(--mgk-track-blue); outline-offset: -2px; }
	.mgk-track__act-icon {
		display: inline-flex; align-items: center; justify-content: center;
		width: 22px; height: 22px; flex: 0 0 22px; color: #748AA7;
	}
	.mgk-track__act-icon svg { width: 22px; height: 22px; display: block; }
	.mgk-track__act-label { flex: 1 1 auto; min-width: 0; }
	.mgk-track__act-chevron {
		display: inline-flex; align-items: center; justify-content: center;
		width: 18px; height: 18px; flex: 0 0 18px; color: #99A9BE;
	}
	.mgk-track__act-chevron svg { width: 18px; height: 18px; display: block; }
	.mgk-timeline--track { padding-top: 14px; }
	.mgk-timeline--track .mgk-timeline__dot {
		width: 32px; height: 32px; border: 0; background: #F1F5FF;
		box-shadow: none; color: #3564F4;
	}
	.mgk-timeline--track .mgk-timeline__dot--done { background: var(--mgk-track-blue, #3564F4); border-color: transparent; }
	.mgk-timeline--track .mgk-timeline__dot--current { background: #EAF0FF; border: 1px solid #D5E2FF; color: var(--mgk-track-blue, #3564F4); }
	.mgk-timeline--track .mgk-timeline__dot--todo { background: #F8FAFD; border: 1px solid #DDE6F3; color: #A2B2C9; }
	.mgk-timeline--track .mgk-timeline__ord { display: none; }
	.mgk-timeline--track .mgk-timeline__dot--done .mgk-timeline__icon--check {
		display: inline-flex; align-items: center; justify-content: center;
		font-size: 16px; line-height: 1; font-weight: 700; color: #fff;
	}
	.mgk-timeline--track .mgk-timeline__dot--current .mgk-timeline__icon--current {
		display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
	}
	.mgk-timeline--track .mgk-timeline__dot--todo .mgk-timeline__icon--stage {
		display: block; width: 18px; height: 18px;
	}
	.mgk-timeline--track .mgk-timeline__bar { width: 2px; min-height: 32px; background: #DCE6F3; }
	.mgk-timeline--track .mgk-timeline__bar.is-done { background: var(--mgk-track-blue, #3564F4); }
	.mgk-timeline--track .mgk-timeline__label { font-size: 14px; line-height: 20px; font-weight: 700; color: #98A9C0; }
	.mgk-timeline--track .mgk-timeline__label.is-active { color: var(--mgk-navy); }
	.mgk-timeline--track .mgk-timeline__time { font-size: 12px; line-height: 16px; font-weight: 500; color: #8FA4C2; }
	.mgk-timeline--track .mgk-timeline__description { display: block; margin: 6px 0 0; font-size: 12px; line-height: 17px; font-weight: 500; color: #8FA4C2; }
	.mgk-timeline--track .mgk-timeline__description:empty { display: none; }
	.mgk-timeline--track .mgk-timeline__body { padding-bottom: 16px; }
	.mgk-track__estimate { margin-top: 2px; }
}

.mgk-track .mgk-pill--pending { background: var(--mien-status-pending-bg); color: var(--mien-status-pending-fg); }
.mgk-track .mgk-pill--confirmed { background: var(--mien-status-confirmed-bg); color: var(--mien-status-confirmed-fg); }
.mgk-track .mgk-pill--picking,
.mgk-track .mgk-pill--packed,
.mgk-track .mgk-pill--dispatched { background: var(--mien-status-picking-bg); color: var(--mien-status-picking-fg); }
.mgk-track .mgk-pill--delivering { background: var(--mien-status-delivering-bg); color: var(--mien-status-delivering-fg); }
.mgk-track .mgk-pill--delivered { background: var(--mien-status-delivered-bg); color: var(--mien-status-delivered-fg); }
.mgk-track .mgk-pill--cancelled { background: var(--mien-status-cancelled-bg); color: var(--mien-status-cancelled-fg); }
.mgk-track .mgk-pill--refunded { background: var(--mien-status-refunded-bg); color: var(--mien-status-refunded-fg); }
.mgk-track .mgk-pill--mgk-partial { background: var(--mien-status-mgk-partial-bg); color: var(--mien-status-mgk-partial-fg); }
.mgk-track__empty { text-align: center; }
.mgk-track__empty-icon { font-size: 32px; margin-bottom: 12px; }
.mgk-track__empty-title { margin: 0 0 4px; font-weight: 700; color: var(--mgk-navy); }
.mgk-track__empty-text { margin: 0; color: var(--mgk-text-2); }