/* Shop additions in 1.6.0, on every shop page: the announcement bar, social links, the ordering-steps strip,
   quick add to cart, the toast, payment method tiles, the pay box and the animated order tracker.
   Colours come from the roles in shop.css. CSP: no inline styles. */

/* ---------- Announcement bar ---------- */
.ann { position: relative; z-index: 60; font-size: .875rem; line-height: 1.25rem; overflow: hidden; transition: background-color .5s var(--ease), color .5s var(--ease);
  --ann-bg: #064D2E; --ann-ink: #fff; --ann-accent: #5CF59A; --ann-chip: rgba(255, 255, 255, .14); background: var(--ann-bg); color: var(--ann-ink); }
.ann.tone-emerald { --ann-bg: linear-gradient(90deg, #053D25, #0A6B3F 50%, #053D25); }
.ann.tone-ink { --ann-bg: #0A0A0A; --ann-accent: #00C853; }
.ann.tone-amber { --ann-bg: #FFE9B8; --ann-ink: #3D2A00; --ann-accent: #7A4B00; --ann-chip: rgba(61, 42, 0, .1); }
.ann.tone-light { --ann-bg: #EAF7EF; --ann-ink: #06331F; --ann-accent: #006B2D; --ann-chip: rgba(6, 77, 46, .1); }
.ann[hidden] { display: none; }
.ann-in { display: flex; align-items: center; gap: var(--s-75); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-200); min-height: 40px; }
.ann-track { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; }
.ann-msg { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-50) var(--s-100); padding: var(--s-75) 0; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.ann-msg.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ann-msg.out { transform: translateY(-10px); }
.ann-ic { width: 18px; height: 18px; flex: none; color: var(--ann-accent); }
.ann-msg.on .ann-ic { animation: ann-pop .6s var(--ease); }
@keyframes ann-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.ann-text { font-weight: 600; }
.ann-code { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 26px; padding: 0 4px 0 10px; border: 1px dashed var(--ann-accent); border-radius: var(--r-full); background: var(--ann-chip); color: inherit;
  font: inherit; font-family: var(--display); font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.ann-code-hint { padding: 1px 8px; border-radius: var(--r-full); background: var(--ann-accent); color: #03170D; font-family: inherit; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; }
.tone-amber .ann-code-hint, .tone-light .ann-code-hint { color: #fff; }
.ann-code.copied .ann-code-hint { background: #fff; color: #064D2E; }
.ann-clock { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-full); background: var(--ann-chip); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ann-clock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ann-accent); animation: ann-blink 1.2s ease-in-out infinite; }
@keyframes ann-blink { 50% { opacity: .25; } }
.ann-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ann-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ann-link .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.ann-link:hover .ic { transform: translateX(3px); }
.ann-nav, .ann-x { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: var(--r-md); background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.ann-nav:hover, .ann-x:hover { opacity: 1; background: var(--ann-chip); }
.ann-nav .ic, .ann-x .ic { width: 16px; height: 16px; }
.ann :focus-visible { outline: 2px solid var(--ann-accent); outline-offset: 2px; }
.ann-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.ann-progress i { display: block; height: 100%; width: 0; background: var(--ann-accent); opacity: .8; }
.ann.running .ann-progress i { animation: ann-fill var(--ann-time, 6s) linear forwards; }
.ann.paused .ann-progress i { animation-play-state: paused; }
@keyframes ann-fill { to { width: 100%; } }
@media (max-width: 640px) { .ann { font-size: .8125rem; } .ann-nav { display: none; } .ann-in { padding: 0 var(--s-100); } }

/* ---------- Social links ---------- */
.so-pill, .so-btn { --so: var(--brand-dark); }
.so-facebook { --so: #1877F2; } .so-instagram { --so: #D62976; } .so-tiktok { --so: #111; } .so-x { --so: #111; } .so-youtube { --so: #E62117; }
.so-messenger { --so: #0A7CFF; } .so-telegram { --so: #229ED9; } .so-whatsapp { --so: #128C4A; } .so-viber { --so: #7360F2; } .so-linkedin { --so: #0A66C2; }
.so-email, .so-website { --so: var(--brand-dark); }
.social-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200) var(--s-300); padding: var(--s-300) 0; margin-top: var(--s-300); border-top: 1px solid var(--line); }
.social-head { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.5rem; }
.social-row, .so-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-75); }
.so-pill { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 44px; padding: 4px 14px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg); color: var(--ink); text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.so-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--well); color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease); }
.so-ic .ic { width: 20px; height: 20px; }
.so-text { display: grid; line-height: 1.1; }
.so-name { font-weight: 600; font-size: .875rem; }
.so-handle { color: var(--muted); font-size: .75rem; }
.so-pill:hover { border-color: var(--so); transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--so); }
.so-pill:hover .so-ic { background: var(--so); color: #fff; transform: rotate(-8deg) scale(1.06); }
.so-card { margin-top: var(--s-200); padding: var(--s-200); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); }
.so-card .caption-3 { margin: 0 0 var(--s-100); }
.so-grid .so-pill { width: 100%; }
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.nav-social { display: none; }
@media (max-width: 960px) {
  .nav.open .nav-social { display: flex; flex-wrap: wrap; gap: var(--s-75); padding-top: var(--s-200); margin-top: var(--s-100); border-top: 1px solid var(--line); }
  .nav .nav-social .so-btn { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: inherit; }
  .nav .nav-social .so-btn .ic { width: 20px; height: 20px; }
}
@media (prefers-color-scheme: dark) { .so-tiktok, .so-x { --so: #fff; } .so-pill:hover .so-ic { color: #04120B; } .so-email, .so-website { --so: var(--brand-emerald); } }

/* ---------- Ordering steps strip (cart, checkout, order) ---------- */
.flow { list-style: none; margin: var(--s-200) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: flow; }
.flow li { position: relative; display: flex; align-items: center; gap: var(--s-100); padding-right: var(--s-200); color: var(--muted); min-width: 0; }
.flow li::after { content: ""; position: absolute; left: 44px; right: 8px; top: 18px; height: 2px; background: var(--line); z-index: 0; }
.flow li:last-child::after { display: none; }
.flow li.done::after { background: var(--accent); }
.flow-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); color: var(--muted); }
.flow-dot .ic { width: 18px; height: 18px; }
.flow-label { position: relative; z-index: 1; display: grid; padding-right: var(--s-75); background: var(--bg); font-weight: 600; font-size: .875rem; line-height: 1.2; min-width: 0; }
.flow-no { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.flow li.done .flow-dot { background: var(--accent); border-color: var(--accent); color: #03170D; }
.flow li.done { color: var(--ink); }
.flow li.now { color: var(--ink); }
.flow li.now .flow-dot { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); animation: flow-pulse 2.4s ease-in-out infinite; }
@keyframes flow-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } }
@media (max-width: 760px) {
  .flow li { flex-direction: column; align-items: flex-start; gap: var(--s-50); padding-right: var(--s-75); }
  .flow-label { font-size: .75rem; background: none; }
  .flow li:not(.now) .flow-label { color: var(--muted); }
  .flow li::after { left: 40px; right: 4px; }
}

/* ---------- Quick add to cart ---------- */
.qa { display: grid; gap: var(--s-100); margin: 0; }
.qa-set { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; align-items: center; gap: var(--s-100); }
.qa-set legend { float: left; padding: 0; width: 64px; font-size: .6875rem; line-height: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--bg); color: var(--ink);
  font-size: .8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.qa-chip:hover { border-color: var(--muted); transform: translateY(-1px); }
.qa input:checked + .qa-chip { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.qa input:focus-visible + .qa-chip { outline: 3px solid var(--focus); outline-offset: 2px; }
.qa input:disabled + .qa-chip { opacity: .4; cursor: not-allowed; text-decoration: line-through; transform: none; }
.qa-row { display: flex; align-items: stretch; gap: var(--s-75); }
.qa-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg); overflow: hidden; flex: none; }
.qa-qty input { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qa-qty input::-webkit-outer-spin-button, .qa-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qa-qty button { display: grid; place-items: center; width: 34px; align-self: stretch; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.qa-qty button[hidden] { display: none; }
.qa-qty button:hover { background: var(--well); }
.qa-qty .ic { width: 14px; height: 14px; }
.qa-go { flex: 1; min-width: 0; min-height: 46px; padding-inline: var(--s-200); justify-content: center; gap: var(--s-75); white-space: nowrap; }
.qa-price { margin-left: auto; padding-left: var(--s-100); border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .qa-go > .ic { display: none; } .qa-go { padding-inline: 12px; gap: 6px; } .qa-price { padding-left: 6px; } }
.qa-go[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.qa-go.is-busy { opacity: .75; pointer-events: none; }
.qa-go.is-done { background: var(--accent); border-color: var(--accent); color: #03170D; }
.qa-msg { margin: 0; min-height: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--muted); }
.qa-msg:empty { display: none; }
.qa-msg.bad { color: var(--alert-ink); }
.qa-msg a { font-weight: 700; }

/* in the hero card: dark glass, emerald button */
.qa-hero { --bg: rgba(255, 255, 255, .06); --line-strong: rgba(255, 255, 255, .24); --ink: #fff; --muted: #9FB2A8; --btn: #00C853; --btn-ink: #03170D; --btn-hover: #2BE07A; --well: rgba(255, 255, 255, .12); --alert-ink: #FFB4A6; --focus: #5CF59A;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-300); align-items: start; }
.qa-hero .qa-set:nth-of-type(2) .qa-chips { flex-wrap: nowrap; }
.qa-hero .qa-row, .qa-hero .qa-msg { grid-column: 1 / -1; }
.qa-hero .qa-set { flex-direction: column; align-items: flex-start; gap: 6px; }
.qa-hero .qa-set legend { float: none; width: auto; }
.qa-hero .qa-go { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.qa-hero .qa-go:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.qa-hero input:checked + .qa-chip { background: #fff; border-color: #fff; color: #04120B; }
@media (max-width: 520px) { .qa-hero { grid-template-columns: minmax(0, 1fr); } .qa-set legend { width: 58px; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 90; display: flex; align-items: center; gap: var(--s-100); max-width: min(92vw, 460px); padding: var(--s-100) var(--s-100) var(--s-100) var(--s-200);
  border-radius: var(--r-2xl); background: #06301D; color: #fff; border: 1px solid rgba(0, 200, 83, .5); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6); font-size: .875rem; line-height: 1.25rem;
  transform: translate(-50%, 24px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.toast[hidden] { display: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #00C853; color: #03170D; }
.toast-ic .ic { width: 16px; height: 16px; }
.toast-text { flex: 1; min-width: 0; }
.toast-text b { display: block; }
.toast a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-lg); background: #00C853; color: #03170D; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-cart.bump { animation: cart-bump .6s var(--ease); }
@keyframes cart-bump { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.96); } }

/* ---------- Checkout: payment tiles, totals ---------- */
.pay-tiles { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-100); }
.pay-tile { position: relative; display: block; cursor: pointer; }
.pay-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pay-tile-body { display: flex; align-items: center; gap: var(--s-100); min-height: 68px; padding: var(--s-100) var(--s-200); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--bg);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.pay-tile:hover .pay-tile-body { border-color: var(--muted); transform: translateY(-1px); }
.pay-tile input:checked + .pay-tile-body { border-color: var(--btn); background: var(--well); box-shadow: inset 0 0 0 1px var(--btn); }
.pay-tile input:focus-visible + .pay-tile-body { outline: 3px solid var(--focus); outline-offset: 2px; }
.pay-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-lg); background: var(--well); color: var(--sigil); }
.pay-ic .ic { width: 22px; height: 22px; }
.pay-ic.k-ewallet { background: color-mix(in srgb, #1877F2 14%, var(--bg)); color: #1557B8; }
.pay-ic.k-bank { background: color-mix(in srgb, #B7791F 16%, var(--bg)); color: #8A5A12; }
.pay-name { display: grid; flex: 1; min-width: 0; font-weight: 700; line-height: 1.25; }
.pay-name small { font-weight: 500; font-size: .75rem; color: var(--muted); }
.pay-check { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; transition: all .25s var(--ease); }
.pay-check .ic { width: 14px; height: 14px; }
.pay-tile input:checked + .pay-tile-body .pay-check { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.promo-row { display: flex; align-items: flex-end; gap: var(--s-75); }
.promo-row label { flex: 1; }
.promo-row .btn { min-height: 48px; width: auto !important; }
.promo-msg { margin: 0; font-weight: 600; }
.promo-msg.ok { color: var(--green-ink); } .promo-msg.bad { color: var(--alert-ink); }
.sum-rows { margin: 0; display: grid; gap: var(--s-75); font-size: .9375rem; }
.sum-rows > div { display: flex; justify-content: space-between; gap: var(--s-200); }
.sum-rows > div[hidden] { display: none; }
.sum-rows dt { color: var(--muted); } .sum-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-rows dd.muted { font-weight: 500; color: var(--muted); }
.sum-total strong.tick { animation: sum-tick .5s var(--ease); }
@keyframes sum-tick { 0% { color: var(--green-ink); transform: translateY(-6px); opacity: .2; } }
.sum-total strong { display: inline-block; }

/* ---------- Order page: pay box ---------- */
.paybox { display: grid; gap: var(--s-200); }
.paybox-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-100) var(--s-200); padding-bottom: var(--s-200); border-bottom: 1px solid var(--line); }
.paybox-head p { margin: 0; }
.paybox-name { font-size: 1.125rem; line-height: 1.5rem; }
.paybox-amount { margin-left: auto; text-align: right; }
.paybox-amount .amount { font-family: var(--display); font-size: 1.75rem; line-height: 2rem; font-weight: 800; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.paybox-grid { display: grid; gap: var(--s-200); }
.paybox-grid.has-qr { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.paybox-grid.has-qr .paybox-qr { grid-row: span 2; }
.paybox-qr { margin: 0; display: grid; gap: var(--s-75); justify-items: center; text-align: center; }
.paybox-qr img { width: 220px; height: 220px; object-fit: contain; border-radius: var(--r-xl); border: 1px solid var(--line); background: #fff; padding: 8px; }
.paybox-facts { margin: 0; display: grid; gap: var(--s-75); }
.paybox-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-100); align-items: center; }
.paybox-facts dt { color: var(--muted); font-size: .875rem; }
.paybox-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); font-weight: 700; }
.paybox-facts .btn.small, .track-no .btn.small { min-height: 28px; padding: 0 10px; font-size: .75rem; width: auto !important; }
.paybox-how { margin: 0; padding: var(--s-100) var(--s-200); border-radius: var(--r-xl); background: var(--well); }
.paybox-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); padding-top: var(--s-200); border-top: 1px solid var(--line); font-size: .875rem; }
.paybox-switch label { font-weight: 600; }
.paybox-switch select { min-height: 36px; padding: 0 var(--s-100); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg); color: var(--ink); font: inherit; }
.paybox-switch .btn { width: auto !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.track-no { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-100); }
.track-no .ic { width: 20px; height: 20px; color: var(--sigil); }
@media (max-width: 640px) { .paybox-grid.has-qr { grid-template-columns: minmax(0, 1fr); } .paybox-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .paybox-amount { margin-left: 0; text-align: left; width: 100%; } }

/* ---------- Order tracker ---------- */
.trk { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 var(--s-300); align-items: center; margin: 0 0 var(--s-300); padding: var(--s-300); border: 1px solid var(--line); border-radius: var(--r-3xl);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 55%); overflow: hidden; }
.trk-scene { border-radius: var(--r-2xl); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid var(--line); }
.trk-svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.trk-svg * { transform-box: fill-box; transform-origin: center; }
.trk-kicker { margin: 0 0 var(--s-50); font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); }
.trk-head { margin: 0 0 var(--s-75); font-family: var(--display); font-size: 1.75rem; line-height: 2.125rem; font-weight: 800; letter-spacing: -0.02em; }
.trk-text { margin: 0; color: var(--muted); max-width: 46ch; }
.trk.is-stopped { background: var(--alert-bg); border-color: var(--alert-line); }
.trk.is-stopped .trk-kicker, .trk.is-stopped .trk-head { color: var(--alert-ink); }

/* the rail */
.trk-rail { grid-column: 1 / -1; list-style: none; margin: var(--s-300) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; --p: 0; }
.trk-rail::before, .trk-rail::after { content: ""; position: absolute; top: 19px; left: calc(100% / 12); height: 4px; border-radius: 2px; }
.trk-rail::before { right: calc(100% / 12); background: var(--line); }
.trk-rail::after { width: calc((100% - 100% / 6) * var(--p)); background: linear-gradient(90deg, var(--btn), var(--accent)); background-size: 200% 100%; animation: trk-fill 1.4s var(--ease) both, trk-shine 2.8s linear infinite; transform-origin: left; }
.trk-rail.p-0 { --p: 0; } .trk-rail.p-20 { --p: .2; } .trk-rail.p-40 { --p: .4; } .trk-rail.p-60 { --p: .6; } .trk-rail.p-80 { --p: .8; } .trk-rail.p-100 { --p: 1; }
@keyframes trk-fill { from { transform: scaleX(0); } }
@keyframes trk-shine { to { background-position: -200% 0; } }
.trk-rail li { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-75); text-align: center; font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--muted); padding: 0 2px; }
.trk-node { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); color: var(--muted); transition: all .4s var(--ease); }
.trk-node .ic { width: 20px; height: 20px; }
.trk-rail li.done { color: var(--ink); }
.trk-rail li.done .trk-node { background: var(--accent); border-color: var(--accent); color: #03170D; }
.trk-rail li.now { color: var(--ink); font-weight: 700; }
.trk-rail li.now .trk-node { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); animation: trk-pulse 2s ease-out infinite; }
@keyframes trk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } }
@media (max-width: 720px) {
  .trk { grid-template-columns: minmax(0, 1fr); padding: var(--s-200); gap: var(--s-200) 0; }
  .trk-scene { max-width: 340px; }
  .trk-head { font-size: 1.5rem; line-height: 1.875rem; }
  .trk-rail { grid-template-columns: minmax(0, 1fr); gap: var(--s-100); margin-top: var(--s-100); }
  .trk-rail::before, .trk-rail::after { display: none; }
  .trk-rail li { grid-template-columns: 34px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; font-size: .875rem; }
  .trk-node { width: 34px; height: 34px; } .trk-node .ic { width: 16px; height: 16px; }
  .trk-rail li.next { opacity: .6; }
}

/* the drawings (shared parts) */
.t-ground path { stroke: var(--line-strong); }
.t-ground .t-dash { stroke-dasharray: 18 14; stroke: var(--line); }
.t-accent { stroke: var(--accent); }
.t-fill { fill: var(--ink); stroke: none; }
.t-cap, .t-tape { fill: var(--btn); stroke: var(--btn); }
.t-screen, .t-win { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.t-bill > path:first-child, .t-phone > rect:first-child, .t-box > path:first-child, .t-truck > path, .t-house > path:first-child, .t-parcel > path:first-child, .t-vial > rect:first-child, .t-drop > rect:first-child, .t-flap { fill: var(--bg); }
.t-truck .t-win { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.t-truck .t-accent { fill: none; }
/* new: scan the QR, the coin pops */
.t-scan { stroke: var(--accent); stroke-width: 3; animation: t-scan 2.2s ease-in-out infinite; }
@keyframes t-scan { 0%, 100% { transform: translateY(-26px); } 50% { transform: translateY(28px); } }
.t-coin circle { fill: var(--accent); stroke: var(--btn); } .t-coin path { stroke: #03170D; stroke-width: 2; }
.t-coin { animation: t-bob 2.4s ease-in-out infinite; }
@keyframes t-bob { 50% { transform: translateY(-9px) rotate(8deg); } }
.trk-new .t-bill { animation: t-nudge 2.4s ease-in-out infinite; }
@keyframes t-nudge { 50% { transform: translateY(-5px); } }
/* awaiting payment: the lens goes over the receipt */
.t-lens { transform-box: view-box; transform-origin: 0 0; animation: t-lens 5s ease-in-out infinite; }
.t-lens circle { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--btn); stroke-width: 3.2; } .t-lens path { stroke: var(--btn); stroke-width: 4; } .t-lens .t-glint { stroke: #fff; stroke-width: 2; }
@keyframes t-lens { 0%, 100% { transform: translate(216px, 70px); } 25% { transform: translate(258px, 84px); } 50% { transform: translate(222px, 112px); } 75% { transform: translate(256px, 132px); } }
.t-dots circle { fill: var(--btn); stroke: none; animation: t-dot 1.2s ease-in-out infinite; }
.t-dots circle:nth-child(2) { animation-delay: .2s; } .t-dots circle:nth-child(3) { animation-delay: .4s; }
@keyframes t-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }
/* verified: the stamp lands, the vials line up */
.t-stamp circle { fill: var(--accent); stroke: var(--btn); stroke-width: 3; } .t-stamp path { stroke: #03170D; stroke-width: 4; }
.t-stamp { animation: t-stamp 3.2s var(--ease) infinite; }
@keyframes t-stamp { 0% { transform: scale(2.2) rotate(-20deg); opacity: 0; } 14% { transform: scale(.92) rotate(-8deg); opacity: 1; } 20%, 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.t-vial { animation: t-rise 3.2s var(--ease) infinite; }
.t-vial.v2 { animation-delay: .18s; } .t-vial.v3 { animation-delay: .36s; }
@keyframes t-rise { 0%, 20% { transform: translateY(16px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
/* packed: the vial drops in, the flaps close, the seal appears */
.t-drop { animation: t-drop 3.6s var(--ease) infinite; }
@keyframes t-drop { 0% { transform: translateY(-34px); opacity: 0; } 15% { opacity: 1; } 38%, 100% { transform: translateY(70px); opacity: 0; } }
.t-flap { transform-origin: 50% 100%; animation: t-flap 3.6s var(--ease) infinite; }
@keyframes t-flap { 0%, 40% { transform: scaleY(1); } 55%, 100% { transform: scaleY(.08); } }
.t-seal circle { fill: var(--accent); stroke: var(--btn); stroke-width: 3; } .t-seal path { stroke: #03170D; stroke-width: 3.5; }
.t-seal { animation: t-seal 3.6s var(--ease) infinite; }
@keyframes t-seal { 0%, 58% { transform: scale(0); } 70% { transform: scale(1.15); } 78%, 100% { transform: scale(1); } }
/* shipped: the truck drives, the road runs, the pin waits */
.trk-shipped .t-ground .t-dash { animation: t-road 1s linear infinite; }
@keyframes t-road { to { stroke-dashoffset: 32; } }
.t-truck { animation: t-drive 1.1s ease-in-out infinite; }
@keyframes t-drive { 50% { transform: translateY(-2.5px); } }
.t-wheel circle { fill: var(--ink); } .t-wheel path { stroke: var(--bg); stroke-width: 2; }
.t-wheel { animation: t-spin 1s linear infinite; }
@keyframes t-spin { to { transform: rotate(360deg); } }
.t-speed path { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 60; animation: t-speed 1s linear infinite; }
.t-speed path:nth-child(2) { animation-delay: .2s; } .t-speed path:nth-child(3) { animation-delay: .4s; }
@keyframes t-speed { 0% { stroke-dashoffset: 60; opacity: 0; } 40% { opacity: 1; } 100% { stroke-dashoffset: -60; opacity: 0; } }
.t-clouds path { fill: var(--bg); stroke: var(--line-strong); stroke-width: 2; }
.t-clouds { animation: t-cloud 9s linear infinite; }
@keyframes t-cloud { from { transform: translateX(40px); } to { transform: translateX(-60px); } }
.t-pin path { fill: var(--accent); stroke: var(--btn); } .t-pin circle { fill: var(--bg); stroke: var(--btn); }
.t-pin { transform-origin: 50% 100%; animation: t-pin 1.6s var(--ease) infinite; }
@keyframes t-pin { 50% { transform: translateY(-8px); } }
/* delivered: the check is drawn, a little confetti */
.t-door { fill: var(--btn); stroke: var(--btn); }
.t-done circle { fill: var(--accent); stroke: var(--btn); stroke-width: 3; }
.t-done path { stroke: #03170D; stroke-width: 6; stroke-dasharray: 54; animation: t-check 3s var(--ease) infinite; }
@keyframes t-check { 0% { stroke-dashoffset: 54; } 30%, 100% { stroke-dashoffset: 0; } }
.t-done { animation: t-pop 3s var(--ease) infinite; }
@keyframes t-pop { 0% { transform: scale(.6); } 18% { transform: scale(1.08); } 28%, 100% { transform: scale(1); } }
.t-confetti circle { fill: var(--accent); stroke: none; } .t-confetti path { stroke: var(--btn); stroke-width: 3; }
.t-confetti > * { animation: t-conf 3s ease-out infinite; }
.t-confetti > :nth-child(2n) { animation-delay: .25s; } .t-confetti > :nth-child(3n) { animation-delay: .45s; }
@keyframes t-conf { 0%, 15% { transform: scale(0); opacity: 0; } 35% { transform: scale(1.3); opacity: 1; } 100% { transform: translateY(14px) scale(.8); opacity: 0; } }
.t-parcel { animation: t-nudge 3s ease-in-out infinite; }
/* stopped */
.t-stop circle { fill: var(--alert-bg); stroke: var(--alert-ink); stroke-width: 3; } .t-stop path { stroke: var(--alert-ink); stroke-width: 4; }
.t-return { stroke: var(--alert-ink); stroke-dasharray: 8 8; animation: t-road 1s linear infinite reverse; }
.t-coin.back { animation: t-bob 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .trk *, .ann *, .flow *, .toast, .qa-chip { animation: none !important; transition: none !important; }
  .t-lens { transform: translate(236px, 96px); }
  .t-done path { stroke-dashoffset: 0; }
}
body.motion-off .trk-svg *, body.motion-off .trk-rail::after { animation-play-state: paused; }

/* phones: the order summary is further down the page, so the new total is repeated under the couriers */
.courier-total { display: none; }
@media (max-width: 900px) { .courier-total:not([hidden]) { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-100); margin: var(--s-100) 0 0; padding: var(--s-100) var(--s-200); border-radius: var(--r-lg); background: var(--well); font-size: .9375rem; } .courier-total strong { font-family: var(--display); font-size: 1.125rem; } }