/* Fioreva Tech · store module
   Three-click checkout inside the "Online store" panel. Every class is prefixed st-.
   Layout follows the panel's own width (container queries), not the viewport. */

[data-module="store"] { container: st / inline-size; }

.st {
  --st-pad: 20px;
  --st-gap: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--fg);
  font: 500 .8125rem/1.4 var(--mono);
}

/* ---------- progress rail ---------- */
.st-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  padding: 0 var(--st-pad);
  border-bottom: 1px solid var(--line);
  font: 500 .6875rem/1 var(--mono);
  color: var(--fg-3);
}
.st-rail::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--st-progress, 33.33%);
  height: 1px;
  background: var(--red);
  transition: width .42s steps(6), background-color .2s;
}
.st[data-phase="done"] .st-rail::after { background: var(--mint); }
.st-steps { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; }
.st-step { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-step + .st-step::before {
  content: "";
  width: 14px;
  height: 1px;
  margin-right: 4px;
  background: var(--line-3);
}
.st-step b { font-weight: 600; font-variant-numeric: tabular-nums; }
.st-step.is-done { color: var(--fg-2); }
.st-step[aria-current="step"] { color: var(--fg); }
.st-step[aria-current="step"] b { color: var(--red); }
.st-step.is-paid b { color: var(--mint); }
.st-demo { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.st-demo-tag {
  padding: 3px 5px 2px;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- stage: all steps share one grid cell so the panel height never jumps ---------- */
.st-stage { position: relative; flex: 1; display: grid; min-height: 0; }
.st-view {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  padding: var(--st-pad);
  visibility: hidden;
}
/* The global reduced-motion rule gives every element a tiny transition, and visibility is
   inherited, so the step and its heading must flip at once for the heading to take focus. */
.st-view, .st-info, .st-head, .st-pay-head, .st-title { transition-property: none; }
.st-view.is-active, .st-view.is-in { visibility: visible; }
.st-view.is-in { z-index: 2; pointer-events: none; }
.st-wipe {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- footer ---------- */
.st-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  min-height: 36px;
  padding: 9px var(--st-pad);
  border-top: 1px solid var(--line);
  font: 500 .6875rem/1.35 var(--mono);
  color: var(--fg-2);
}
.st-foot-k { color: var(--fg-3); }

/* ---------- shared pieces ---------- */
.st-eyebrow {
  font: 500 .6875rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.st-title {
  font: 700 1.375rem/1.15 var(--mono);
  letter-spacing: -0.025em;
  color: var(--fg);
}
.st-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: #000;
}
.st-art { position: absolute; inset: 0; width: 100%; height: 100%; shape-rendering: crispEdges; }
.st-grid-l { fill: rgba(255, 255, 255, .055); }
.st-r { fill: var(--red); }
.st-d { fill: var(--red-deep); }
.st-c { fill: var(--cream); }
.st-w { fill: var(--pure); }
.st-tag {
  position: absolute;
  z-index: 1;
  font: 500 .625rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--fg-3);
}
.st-tag-tl { top: 11px; left: 12px; }
.st-tag-br { right: 12px; bottom: 11px; }

/* ---------- 1 · product ---------- */
.st-v-product {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--st-gap);
}
.st-info { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.st-v-product .st-title { margin-top: 10px; }
.st-desc { margin-top: 8px; font: 400 .875rem/1.5 var(--sans); color: var(--fg-2); }
.st-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.st-notes li {
  padding: 5px 8px 4px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font: 500 .6875rem/1 var(--mono);
  color: var(--fg-2);
}
.st-price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.st-cur { font: 500 .8125rem/1 var(--mono); letter-spacing: .02em; color: var(--fg-3); }
.st-amt {
  font: 600 2.125rem/1 var(--mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.st-stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font: 500 .75rem/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.st-dot { flex: none; width: 8px; height: 8px; background: var(--mint); }
.st-stock[data-level="low"] .st-dot { background: var(--cream); }
.st-stock[data-level="out"] { color: var(--fg); }
.st-stock[data-level="out"] .st-dot { background: var(--red); }
.st-flag {
  padding: 3px 6px 2px;
  border: 1px solid rgba(255, 236, 187, .4);
  border-radius: 2px;
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
}
.st-ship {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  font: 500 .6875rem/1.3 var(--mono);
  color: var(--fg-3);
}
.st-ship-icon { flex: none; width: 20px; height: 12px; fill: var(--fg-3); shape-rendering: crispEdges; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-add { flex: 1 1 150px; min-width: 0; }
.st-restock { flex: 0 0 auto; }
/* a button that can't act (out of stock) reads as unavailable: outlined, gray text, no sweep, no arrow.
   Its label says why ("Out of stock", "Only 2 left"), so it stays readable instead of fading to 45% */
.st .btn[aria-disabled="true"] {
  border-color: var(--line-2);
  background: none;
  color: var(--fg-3);
  opacity: 1;
}
.st .btn[aria-disabled="true"] .btn-flag { display: none; }

.st-qty {
  display: inline-flex;
  flex: none;
  height: 44px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
}
.st-qbtn {
  position: relative;
  width: 38px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--fg);
  transition: background-color .2s, color .2s;
}
.st-qbtn::before, .st-qbtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
}
.st-qbtn-dec::after { display: none; }
.st-qbtn-inc::after { width: 2px; height: 10px; }
.st-qbtn:hover { background: rgba(255, 255, 255, .06); }
.st-qbtn[aria-disabled="true"] { color: var(--line-3); background: transparent; cursor: not-allowed; }
.st-qval {
  display: grid;
  place-items: center;
  min-width: 32px;
  border-inline: 1px solid var(--line-2);
  font: 600 .9375rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

/* pixel bloom on first view, then a glint crosses the glass every few seconds */
.st.is-armed .st-px rect { opacity: 0; }
.st.is-armed:not(.is-bloom) .st-reflect { visibility: hidden; }
.st.is-bloom .st-px rect { animation: st-show .01s linear var(--d, 0s) forwards; }
.st-reflect { opacity: .16; }
.st-glint { fill: var(--pure); opacity: .5; transform: translateX(-2px); }
.st.is-live .st-glint { animation: st-glint 5.6s infinite; }
@keyframes st-glint {
  0% { transform: translateX(-2px); animation-timing-function: steps(28, end); }
  20%, 100% { transform: translateX(26px); }
}
/* constant keyframes with a forwards fill: steps(1) can land a hair under 1 and floor to hidden */
@keyframes st-show { from, to { opacity: 1; } }

/* ---------- 2 · checkout ---------- */
.st-v-checkout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px var(--st-gap);
}
.st-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.st-head .st-title { font-size: 1.125rem; }
.st-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-right: -10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  font: 500 .8125rem/1 var(--mono);
  color: var(--fg-2);
  transition: color .2s, background-color .2s;
}
.st-back:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
.st-back-icon { width: 6px; height: 10px; fill: currentColor; shape-rendering: crispEdges; transition: transform .3s var(--ease); }
.st-back:hover .st-back-icon { transform: translateX(-3px); }

.st-sum {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: #000;
}
.st-sum-list { display: flex; flex: 1; flex-direction: column; margin-top: 12px; }
.st-sum-list > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.st-sum-list dt { display: flex; gap: 10px; min-width: 0; color: var(--fg-2); }
.st-sum-list dd { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); }
/* the label block spans the whole row and the value sits over its free corner, so long labels never wrap early */
.st-sum-list .st-sum-item,
.st-sum-list .st-sum-ship { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.st-sum-item dt, .st-sum-ship dt { grid-area: 1 / 1 / 2 / 3; }
.st-sum-item dd, .st-sum-ship dd { grid-area: 1 / 2; }
.st-sum-list .st-sum-item { align-items: end; }
.st-sum-item dt { align-items: flex-end; }
.st-sum-item dd { padding-bottom: 1px; }
.st-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
}
.st-thumb svg { width: 32px; height: 36px; shape-rendering: crispEdges; }
.st-sum-name { display: grid; gap: 3px; min-width: 0; color: var(--fg); }
.st-sum-x { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.st-sum-ship dt { flex-direction: column; gap: 3px; }
.st-sum-sub { font-size: .6875rem; color: var(--fg-3); }
.st-sum-total { margin-top: auto; border-top-color: var(--line-3); }
.st-sum-list .st-sum-total dt { font-weight: 600; color: var(--fg); }
.st-sum-list .st-sum-total dd { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

.st-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-field { display: grid; gap: 7px; }
.st-label {
  padding: 0;
  font: 500 .6875rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.st-select { position: relative; display: block; }
.st-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  background: #000;
  color: var(--fg);
  font: 500 .8125rem/1 var(--mono);
  cursor: pointer;
  transition: border-color .2s;
}
.st-select select:hover { border-color: var(--fg-3); }
/* iOS zooms the page into a focused field under 16px and stays zoomed */
@media (pointer: coarse) { .st-select select { font-size: 16px; } }
.st-select option { background: #000; color: var(--fg); }
.st-select-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  fill: var(--fg-2);
  shape-rendering: crispEdges;
  pointer-events: none;
}

.st-methods { min-width: 0; margin: 0; padding: 0; border: 0; }
.st-methods > .st-label { margin-bottom: 7px; }
.st-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.st-opt input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.st-opt-box {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  row-gap: 3px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  transition: border-color .2s, background-color .2s;
}
/* --fg-3 keeps the empty square at 5:1 on the tile, the only sign it is a radio */
.st-radio { position: relative; grid-row: span 2; width: 10px; height: 10px; border: 1px solid var(--fg-3); }
.st-radio::after { content: ""; position: absolute; inset: 2px; background: var(--red); opacity: 0; }
.st-opt-name { font: 500 .75rem/1.2 var(--mono); white-space: nowrap; color: var(--fg-2); }
.st-opt-note {
  grid-column: 2;
  overflow: hidden;
  font: 400 .625rem/1.2 var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-3);
}
.st-opt:hover .st-opt-box { border-color: var(--line-3); }
.st-opt input:checked + .st-opt-box { border-color: var(--red); background: rgba(255, 0, 37, .06); }
.st-opt input:checked + .st-opt-box .st-radio { border-color: var(--red); }
.st-opt input:checked + .st-opt-box .st-radio::after { opacity: 1; }
.st-opt input:checked + .st-opt-box .st-opt-name { color: var(--fg); }
.st-opt input:focus-visible + .st-opt-box { outline: 2px solid var(--mint); outline-offset: 2px; }
.st-pay { width: 100%; margin-top: auto; }

/* ---------- 3 · paying and done ---------- */
.st-v-pay {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "visual head" "visual log" "visual foot";
  column-gap: var(--st-gap);
}
.st-v-pay .st-visual { grid-area: visual; }
.st-pay-head { grid-area: head; display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.st-status { display: flex; align-items: center; gap: 8px; }
.st-status::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--red); }
.st-v-pay[data-phase="done"] .st-status { color: var(--mint); }
.st-v-pay[data-phase="done"] .st-status::before { background: var(--mint); }
.st-meta { font: 500 .75rem/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg-2); }

.st-log { grid-area: log; display: grid; align-content: start; margin-top: 16px; padding: 0; border-top: 1px solid var(--line); }
.st-log li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font: 500 .75rem/1.35 var(--mono);
  color: var(--fg-3);
  transition: color .2s;
}
.st-log li[data-state="wait"] { color: var(--fg-2); }
.st-log li[data-state="done"] { color: var(--fg); }
.st-mark { width: 8px; height: 8px; border: 1px solid var(--line-3); }
.st-log li[data-state="wait"] .st-mark { border-color: var(--red); }
.st-log li[data-state="done"] .st-mark { border-color: var(--mint); background: var(--mint); }
.st-log time { font-size: .6875rem; font-variant-numeric: tabular-nums; color: var(--fg-3); }

.st-pay-foot {
  grid-area: foot;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding-top: 12px;
}
.st-hint { display: flex; align-items: center; gap: 10px; font: 500 .75rem/1.4 var(--mono); color: var(--fg); }
.st-hint-flag { flex: none; width: 6px; height: 13px; fill: var(--red); }
.st-again { min-width: 140px; }
.st-v-pay[data-phase="paying"] .st-pay-foot { visibility: hidden; }
.st-v-pay[data-phase="done"] .st-pay-foot { animation: st-reveal .3s steps(6) .55s backwards; }
@keyframes st-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* pixel loader while waiting, then a mint check draws itself and a few pixels bloom */
.st-loader rect { fill: var(--line-3); }
.st-v-pay[data-phase="paying"] .st-loader rect { animation: st-load .88s steps(1) infinite; animation-delay: calc(var(--i) * .22s - .88s); }
.st-v-pay[data-phase="done"] .st-loader { display: none; }
@keyframes st-load {
  0% { fill: var(--red); }
  25% { fill: var(--red-deep); }
  50%, 100% { fill: var(--line-3); }
}
.st-check { fill: var(--mint); }
.st-check rect, .st-sparks rect { opacity: 0; }
.st-v-pay[data-phase="done"] .st-check rect { animation: st-show .01s linear var(--d, 0s) forwards; }
.st-v-pay[data-phase="done"] .st-art { filter: drop-shadow(0 0 10px rgba(0, 255, 194, .28)); }
.st-spark-m { fill: var(--mint); }
.st-spark-w { fill: var(--pure); }
.st-v-pay[data-phase="done"] .st-sparks rect { animation: st-spark .5s steps(3, jump-none) var(--d, 0s) forwards; }
.st-small-art .st-sparks { display: none; }
@keyframes st-spark {
  from { opacity: 1; }
  to { opacity: 0; }
}
.st-v-pay[data-phase="paying"] .st-status::before,
.st-log li[data-state="wait"] .st-mark { animation: st-blink .8s steps(1) infinite; }
@keyframes st-blink { 50% { opacity: .15; } }
.st:not(.is-live) .st-loader rect,
.st:not(.is-live) .st-status::before,
.st:not(.is-live) .st-mark { animation-play-state: paused; }

/* ---------- narrow two-column checkout (about 560 to 630 px): the payment tiles need the room ---------- */
@container st (min-width: 560px) and (max-width: 629px) {
  .st-v-checkout { grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); column-gap: 16px; }
  .st-thumb { display: none; }
}

/* ---------- medium panels (about 420 to 560 px, two systems per row on small laptops) ---------- */
@container st (max-width: 559px) {
  .st { --st-pad: 16px; --st-gap: 16px; }
  .st-demo-full, .st-notes { display: none; }
  .st-v-product { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .st-title { font-size: 1.25rem; }
  .st-amt { font-size: 1.875rem; }
  .st-price { margin-top: 16px; }
  .st-ship { padding-top: 12px; }

  .st-v-checkout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; }
  .st-sum { padding: 0; border: 0; background: none; }
  .st-sum-h, .st-thumb, .st-opt-note, .st-sum-list .st-sum-area { display: none; }
  .st-sum-list { margin-top: 0; }
  .st-sum-list > div { align-items: center; padding: 4px 0; }
  .st-sum-list > div:first-child { border-top: 0; }
  .st-sum-list .st-sum-item, .st-sum-list .st-sum-ship { display: flex; align-items: center; }
  .st-sum-name { display: flex; gap: 8px; }
  .st-sum-ship dt { flex-direction: row; align-items: baseline; gap: 8px; }
  .st-sum-total { margin-top: 0; }
  .st-form { gap: 8px; }
  .st-field { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .st-methods > .st-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-opt-box { min-height: 36px; padding: 6px 10px; }
  .st-radio { grid-row: auto; }
  .st-pay { margin-top: 0; }

  .st-v-pay {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "visual head" "log log" "foot foot";
    column-gap: 16px;
  }
  .st-v-pay .st-visual { height: 96px; align-self: start; }
  .st-v-pay .st-title { font-size: 1.125rem; }
  .st-pay-head { gap: 8px; padding-top: 2px; }
  .st-log { margin-top: 14px; }
  .st-pay-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
  .st-again { min-width: 0; }
}

/* ---------- phones: everything stacks, the art takes the spare height ---------- */
@container st (max-width: 419px) {
  .st-step:not([aria-current]) span { display: none; }
  .st-step + .st-step::before { width: 10px; }

  .st-v-product { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 1fr) auto; gap: 18px; }
  .st-info { padding-top: 0; }
  .st-ship { margin-top: 18px; padding-top: 0; }

  .st-opts { grid-template-columns: minmax(0, 1fr); }
  .st-opt-box { min-height: 40px; }
  .st-methods > .st-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .st-field { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .st-form { gap: 14px; }
  .st-pay { margin-top: 4px; }

  .st-v-pay {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(140px, 1fr) auto auto auto;
    grid-template-areas: "visual" "head" "log" "foot";
  }
  .st-v-pay .st-visual { height: auto; align-self: stretch; }
  .st-pay-head { margin-top: 18px; }
  .st-v-pay .st-title { font-size: 1.25rem; }
  .st-pay-foot { flex-direction: column; align-items: stretch; }
  .st-again { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .st .st-glint,
  .st .st-px rect,
  .st .st-loader rect,
  .st .st-check rect,
  .st .st-sparks rect,
  .st .st-mark,
  .st .st-status::before,
  .st .st-pay-foot { animation: none !important; }
  .st .st-glint { display: none; }
  .st .st-px rect { opacity: 1; }
  .st-v-pay[data-phase="done"] .st-check rect { opacity: 1; }
  .st .st-loader rect:nth-child(1) { fill: var(--red); }
  .st .st-loader rect:nth-child(2) { fill: var(--red-deep); }
  .st .st-rail::after { transition: none; }
}

/* paused from the nav: the same end states as reduced motion; orders still go through */
:root[data-motion="paused"] .st .st-glint,
:root[data-motion="paused"] .st .st-px rect,
:root[data-motion="paused"] .st .st-loader rect,
:root[data-motion="paused"] .st .st-check rect,
:root[data-motion="paused"] .st .st-sparks rect,
:root[data-motion="paused"] .st .st-mark,
:root[data-motion="paused"] .st .st-status::before,
:root[data-motion="paused"] .st .st-pay-foot { animation: none !important; }
:root[data-motion="paused"] .st .st-glint { display: none; }
:root[data-motion="paused"] .st .st-px rect { opacity: 1; }
:root[data-motion="paused"] .st-v-pay[data-phase="done"] .st-check rect { opacity: 1; }
:root[data-motion="paused"] .st .st-loader rect:nth-child(1) { fill: var(--red); }
:root[data-motion="paused"] .st .st-loader rect:nth-child(2) { fill: var(--red-deep); }
:root[data-motion="paused"] .st .st-rail::after,
:root[data-motion="paused"] .st .st-log li,
:root[data-motion="paused"] .st .st-back,
:root[data-motion="paused"] .st .st-back-icon,
:root[data-motion="paused"] .st .st-qbtn,
:root[data-motion="paused"] .st .st-opt-box,
:root[data-motion="paused"] .st .st-select select,
:root[data-motion="paused"] .st .btn,
:root[data-motion="paused"] .st .btn-flag { transition: none; }