/**
 * pista.css — sotto alla scheda prodotto: il nastro che scorre e la «pista» dal magazzino al garage.
 *
 * ⭐ Portato 1:1 dal negozio Shopify (ntc-prodotto-sotto.css). La macchinina percorre le tappe
 * VERE dell'ordine — oggi, spedito, consegnato, reso — con le date calcolate sull'orologio di
 * chi guarda: niente promesse generiche, gli stessi giorni che diciamo nella scheda.
 *
 * ⛔ MISURE IN PX: sul negozio la radice è 10px, qui 16.
 * ⛔ La sezione sta DENTRO alla griglia a due colonne della scheda prodotto: senza
 *    `grid-column: 1 / -1` finirebbe schiacciata nella colonna della foto (misurato).
 * ⚠️ Il carattere è quello del sito, non quello del tema comprato.
 */

.woocommerce div.product .ntc-pista-sez { grid-column: 1 / -1; margin: 40px 0 0; }

/* ── il nastro che scorre ──────────────────────────────────────────────────────────────── */
.ntc-nastro { position: relative; height: 118px; overflow: hidden; margin: 0 0 30px; }
.ntc-nastro__rosso, .ntc-nastro__ombra { position: absolute; left: -4%; right: -4%; top: 50%; display: flex; align-items: center; overflow: hidden; }
.ntc-nastro__rosso { z-index: 2; height: 52px; margin-top: -26px; background: var(--ntc-rosso, #b3373a); transform: rotate(-2deg); box-shadow: 0 14px 28px rgba(179, 55, 58, .25); }
.ntc-nastro__ombra { z-index: 1; height: 38px; margin-top: -19px; background: #12161c; transform: rotate(1.8deg); }
.ntc-nastro__traccia { display: flex; align-items: center; gap: 26px; padding-left: 26px; white-space: nowrap; will-change: transform; animation: ntc-nastro 42s linear infinite; }
.ntc-nastro__traccia--indietro { animation-direction: reverse; animation-duration: 58s; }
.ntc-nastro__rosso span { font: italic 800 20px/1 var(--ntc-font); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.ntc-nastro__ombra span { font: italic 800 13px/1 var(--ntc-font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ntc-nastro i { flex: none; width: 30px; height: 12px; transform: skewX(-26deg); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 5px, transparent 5px 9px); }
.ntc-nastro__ombra i { opacity: .35; height: 8px; }
.ntc-nastro:hover .ntc-nastro__traccia { animation-play-state: paused; }
@keyframes ntc-nastro { to { transform: translateX(-50%); } }

/* ── la pista dell'ordine ──────────────────────────────────────────────────────────────── */
.ntc-pista { position: relative; overflow: hidden; background: #fff; border: 1px solid #e8eaef; border-radius: 24px; padding: 34px 38px 32px; }
.ntc-pista::before {
  content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 120px; opacity: .06; pointer-events: none;
  background: conic-gradient(#12161c 25%, transparent 0 50%, #12161c 0 75%, transparent 0) 0 0 / 30px 30px;
  -webkit-mask: linear-gradient(225deg, #000 20%, transparent 70%); mask: linear-gradient(225deg, #000 20%, transparent 70%);
}
.ntc-pista__occhiello { display: inline-flex; align-items: center; gap: 10px; font: 800 12px var(--ntc-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ntc-rosso, #b3373a); }
.ntc-pista__occhiello::before { content: ""; width: 26px; height: 10px; transform: skewX(-26deg); background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); }
.ntc-pista__titolo { margin: 8px 0 6px; font: 800 34px/1.08 var(--ntc-font); letter-spacing: -.022em; color: #12161c; }
.ntc-pista__sotto { margin: 0 0 22px; font: 500 15px/1.5 var(--ntc-font); color: #5d6572; }
.ntc-pista__strada { position: relative; height: 62px; }
.ntc-pista__riga { position: absolute; left: 0; right: 0; bottom: 8px; height: 6px; border-radius: 6px; background: repeating-linear-gradient(90deg, #d7dbe3 0 24px, transparent 24px 36px); }
.ntc-pista__fatto { position: absolute; left: 0; bottom: 8px; height: 6px; width: var(--ntc-avanzato, 0px); border-radius: 6px; background: linear-gradient(90deg, rgba(179, 55, 58, .25), var(--ntc-rosso, #b3373a)); transition: width 1.1s cubic-bezier(.3, .7, .2, 1); }
.ntc-pista__auto { position: absolute; bottom: 13px; left: var(--ntc-avanzato, 0px); width: 96px; margin-left: -48px; color: var(--ntc-rosso, #b3373a); transition: left 1.1s cubic-bezier(.3, .7, .2, 1); }
.ntc-pista__auto svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(18, 22, 28, .18)); }
.ntc-pista__scia { position: absolute; right: 92%; top: 30%; width: 90px; height: 16px; opacity: 0; transition: opacity .25s ease;
  background: repeating-linear-gradient(0deg, rgba(179, 55, 58, .55) 0 2px, transparent 2px 6px);
  -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
.ntc-pista.is-in-corsa .ntc-pista__scia { opacity: 1; }
.ntc-pista__tappe { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ntc-pista__segno { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; transform: skewX(-8deg); background: #f2f3f6; color: #12161c; font: 800 14px var(--ntc-font); transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.ntc-pista__segno svg { width: 17px; height: 17px; }
.ntc-pista__tappa.is-raggiunta .ntc-pista__segno { background: var(--ntc-rosso, #b3373a); color: #fff; transform: skewX(-8deg) scale(1.08); }
.ntc-pista__tappa strong { display: block; margin-top: 10px; font: 800 17px/1.2 var(--ntc-font); color: #12161c; }
.ntc-pista__tappa em { display: block; margin-top: 3px; font: 600 14px/1.35 var(--ntc-font); font-style: normal; color: #5d6572; }


@media screen and (max-width: 749px) {
  .ntc-nastro { height: 92px; margin-bottom: 20px; }
  .ntc-nastro__rosso { height: 42px; margin-top: -21px; }
  .ntc-nastro__rosso span { font-size: 16px; }
  .ntc-pista { padding: 24px 18px; border-radius: 18px; }
  .ntc-pista__titolo { font-size: 26px; }
  .ntc-pista__strada { display: none; }
  .ntc-pista__tappe { grid-template-columns: 1fr; gap: 0; margin-top: 4px; }
  .ntc-pista__tappa { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; padding: 10px 0; border-bottom: 1px dashed #e1e5eb; }
  .ntc-pista__tappa:last-child { border-bottom: 0; }
  .ntc-pista__segno { grid-row: span 2; align-self: center; }
  .ntc-pista__tappa strong { margin-top: 0; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ntc-pista__auto, .ntc-pista__fatto { transition: none !important; }
}