/* ============================================================
   Galaxi components. Consumes tokens.css and defines no colour
   of its own — every value is a var(). That is what makes the
   dark remap and the accessibility widget's modes work.
   ============================================================ */

/* ---- skip link ------------------------------------------- */
.gx-skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  z-index: calc(var(--gx-z-panel) + 10);
  padding: var(--gx-s-4) var(--gx-s-5);
  background: var(--gx-paper); color: var(--gx-ink);
  font: var(--gx-label); text-decoration: none;
  border: 2px solid var(--gx-ink);
}
.gx-skip:focus { inset-inline-start: var(--gx-s-4); top: var(--gx-s-4); }

/* ---- context line ---------------------------------------- */
.gx-context {
  margin: 0; padding: var(--gx-s-3) var(--gx-gutter);
  background: var(--gx-band-2); color: var(--gx-ink-2);
  font: var(--gx-dense); text-align: center;
}

/* ---- off-canvas ------------------------------------------ */
.gx-scrim {
  position: fixed; inset: 0; z-index: var(--gx-z-scrim);
  background: var(--gx-scrim);
  opacity: 0; transition: opacity var(--gx-t-panel-out) var(--gx-ease-out);
}
.gx-scrim.is-open { opacity: 1; transition-duration: var(--gx-t-panel-in); }

.gx-offcanvas {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  z-index: var(--gx-z-panel);
  inline-size: min(88vw, 380px);
  background: var(--gx-paper);
  border-inline-end: 1px solid var(--gx-hair);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--gx-t-panel-out) var(--gx-ease-out);
}
.gx-offcanvas.is-open {
  transform: translateX(0);
  transition-duration: var(--gx-t-panel-in);
  transition-timing-function: var(--gx-ease-in);
}

/* Body scroll lock. position:fixed would lose scroll position, so we
   only stop the scroll — the panel has its own overscroll containment. */
.gx-locked, .gx-locked body { overflow: hidden; }

.gx-offcanvas__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gx-s-5); border-block-end: 1px solid var(--gx-hair);
}
.gx-offcanvas__title { font: var(--gx-sub); letter-spacing: var(--gx-sub-track); }
.gx-offcanvas__close {
  min-inline-size: 44px; min-block-size: 44px;
  background: none; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--gx-ink);
  border-radius: var(--gx-r-control);
}
.gx-offcanvas__list { list-style: none; margin: 0; padding: var(--gx-s-4) 0; }
.gx-offcanvas__list a {
  display: block; padding: var(--gx-s-4) var(--gx-s-5);
  min-block-size: 44px;
  color: var(--gx-ink); text-decoration: none; font: var(--gx-body);
}
.gx-offcanvas__list a:hover { background: var(--gx-band); }
.gx-offcanvas__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.gx-offcanvas__list .sub-menu a {
  padding-inline-start: var(--gx-s-8);
  color: var(--gx-ink-2); font: var(--gx-dense);
}
.gx-offcanvas__foot {
  margin-block-start: auto; padding: var(--gx-s-5);
  border-block-start: 1px solid var(--gx-hair);
  display: flex; flex-direction: column; gap: var(--gx-s-3);
}
.gx-offcanvas__account { margin: 0 0 var(--gx-s-3); font: var(--gx-dense); color: var(--gx-ink-3); }

.gx-link {
  color: var(--gx-act-ink); font: var(--gx-body); text-decoration: none;
  min-block-size: 44px; display: inline-flex; align-items: center;
}
.gx-link:hover { text-decoration: underline; }
.gx-link::after { content: " \203A"; }

/* ---- sticky action bar ----------------------------------- */
.gx-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0;
  z-index: var(--gx-z-bar);
  background: var(--gx-paper);
  border-block-start: 1px solid var(--gx-rule);
  box-shadow: var(--gx-e-2);
}
.gx-bar__inner {
  max-inline-size: var(--gx-measure-max); margin-inline: auto;
  padding: var(--gx-s-4) var(--gx-gutter);
  display: flex; align-items: center; gap: var(--gx-s-5);
}
.gx-bar--trade .gx-bar__inner { padding-block: var(--gx-s-3); }

.gx-bar__progress { flex: 1 1 auto; min-inline-size: 0; }
.gx-bar__progress-text { margin: 0 0 var(--gx-s-2); font: var(--gx-dense); color: var(--gx-ink-2); }

.gx-meter {
  block-size: 6px; border-radius: var(--gx-r-pill);
  background: var(--gx-band-2); overflow: hidden;
}
.gx-meter__fill {
  display: block; block-size: 100%;
  background: var(--gx-act);
  transition: inline-size var(--gx-t-disclose) var(--gx-ease-in);
}

.gx-bar__cart {
  display: inline-flex; align-items: center; gap: var(--gx-s-3);
  padding: var(--gx-s-4) var(--gx-s-5);
  min-block-size: 44px;
  background: var(--gx-act); color: var(--gx-paper);
  border-radius: var(--gx-r-control); text-decoration: none;
  font: var(--gx-price-inline);
}
.gx-bar__cart:hover { background: var(--gx-act-h); }
.gx-bar__cart:active { background: var(--gx-act-p); }
.gx-bar__count {
  min-inline-size: 24px; min-block-size: 24px;
  display: inline-grid; place-items: center;
  border-radius: var(--gx-r-pill);
  background: var(--gx-paper); color: var(--gx-act-ink);
  font: var(--gx-label);
}
@media (max-width: 640px) {
  .gx-bar__label { display: none; }
}

/* ---- seller attribution ---------------------------------- */
.gx-seller {
  margin: var(--gx-s-4) 0 0; font: var(--gx-dense); color: var(--gx-ink-2);
}
.gx-seller--vendor {
  padding: var(--gx-s-4);
  background: var(--gx-band);
  border-inline-start: 3px solid var(--gx-act);
  border-radius: var(--gx-r-inline);
}
.gx-seller__note {
  margin: var(--gx-s-3) 0 0; font: var(--gx-dense); color: var(--gx-ink-3);
}

/* ---- checkout error summary ------------------------------ */
.gx-errors:empty { display: none; }
.gx-errors {
  padding: var(--gx-s-5); margin-block-end: var(--gx-s-5);
  background: var(--gx-stop-tint);
  border-inline-start: 3px solid var(--gx-stop);
  border-radius: var(--gx-r-inline);
  color: var(--gx-ink);
}