/* ============================================================
   Commerce components. Tokens only — no literal colour anywhere,
   which is what lets the dark remap and the accessibility
   widget's monochrome mode both work without special cases.
   ============================================================ */

/* Sticky footer without JS: the body is a grid, main takes the slack. */
body { display: grid; grid-template-rows: auto auto 1fr auto; min-block-size: 100svb; }
.gx-main { inline-size: 100%; }

/* ---- header ---------------------------------------------- */
.gx-head { border-block-end: 1px solid var(--gx-hair); background: var(--gx-paper); }
.gx-head__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-head__burger {
  display: none; min-inline-size: 44px; min-block-size: 44px;
  background: none; border: 0; cursor: pointer; border-radius: var(--gx-r-control);
}
.gx-head__burger-bars, .gx-head__burger-bars::before, .gx-head__burger-bars::after {
  display: block; inline-size: 20px; block-size: 2px;
  background: var(--gx-ink); content: "";
}
.gx-head__burger-bars { position: relative; margin-inline: auto; }
.gx-head__burger-bars::before { position: absolute; inset-block-start: -6px; }
.gx-head__burger-bars::after  { position: absolute; inset-block-start:  6px; }

.gx-head__logo { text-decoration: none; color: var(--gx-ink); }
.gx-wordmark {
  font: var(--gx-w-light) 22px/1 var(--gx-font);
  letter-spacing: -.02em; text-transform: none;
}

.gx-head__list { display: flex; gap: var(--gx-s-5); list-style: none; margin: 0; padding: 0; }
.gx-head__list a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  color: var(--gx-ink-2); font: var(--gx-body); text-decoration: none;
}
.gx-head__list a:hover { color: var(--gx-ink); }

.gx-head__search { margin-inline-start: auto; display: flex; }
.gx-head__search input {
  min-block-size: 40px; min-inline-size: 220px;
  padding: var(--gx-s-3) var(--gx-s-4);
  font: var(--gx-dense); color: var(--gx-ink);
  background: var(--gx-band); border: 1px solid var(--gx-rule);
  border-start-start-radius: var(--gx-r-control);
  border-end-start-radius: var(--gx-r-control);
}
.gx-head__search button {
  min-inline-size: 44px; min-block-size: 40px;
  background: var(--gx-ink); color: var(--gx-paper);
  border: 0; cursor: pointer;
  border-start-end-radius: var(--gx-r-control);
  border-end-end-radius: var(--gx-r-control);
}
.gx-head__account a {
  display: inline-flex; align-items: center; gap: var(--gx-s-3);
  min-block-size: 44px; color: var(--gx-ink); font: var(--gx-body); text-decoration: none;
}
.gx-tier {
  padding: 2px var(--gx-s-3); border-radius: var(--gx-r-pill);
  background: var(--gx-act-tint); color: var(--gx-act-ink); font: var(--gx-label);
}

@media (max-width: 860px) {
  .gx-head__burger { display: block; }
  .gx-head__nav, .gx-head__search { display: none; }
  .gx-head__account { margin-inline-start: auto; }
}

/* ---- price block ----------------------------------------- */
.gx-price { margin-block: var(--gx-s-4); }
.gx-price__row { display: flex; align-items: baseline; gap: var(--gx-s-3); margin: 0; }
.gx-price__figure { font: var(--gx-price); color: var(--gx-ink); }
.gx-price--single .gx-price__figure { font: var(--gx-price-hero); }
.gx-price--card   .gx-price__figure { font: var(--gx-price-inline); }
.gx-price__was    { font: var(--gx-dense); color: var(--gx-ink-3); }
.gx-price__basis,
.gx-price__pack   { margin: var(--gx-s-2) 0 0; font: var(--gx-dense); color: var(--gx-ink-3); }
.gx-price__save   { margin: var(--gx-s-2) 0 0; font: var(--gx-dense); color: var(--gx-act-ink); }
.gx-price__tier   { margin: var(--gx-s-2) 0 0; font: var(--gx-label); color: var(--gx-act-ink); }
.gx-price__points { margin: var(--gx-s-2) 0 0; font: var(--gx-dense); color: var(--gx-ink-2); }
.gx-price__ship   { margin: var(--gx-s-2) 0 0; font: var(--gx-dense); color: var(--gx-ink-2); }
.gx-price__note {
  margin: var(--gx-s-3) 0 0; padding: var(--gx-s-3) var(--gx-s-4);
  font: var(--gx-dense); color: var(--gx-ink-2);
  background: var(--gx-band); border-radius: var(--gx-r-inline);
}

/* ---- quantity breaks ------------------------------------- */
.gx-breaks { inline-size: 100%; border-collapse: collapse; margin-block-start: var(--gx-s-5); }
.gx-breaks caption {
  text-align: start; font: var(--gx-label); color: var(--gx-ink-3);
  padding-block-end: var(--gx-s-3);
}
.gx-breaks th, .gx-breaks td {
  padding: var(--gx-row-pad) var(--gx-s-4);
  font-size: var(--gx-row-text);
  border-block-end: 1px solid var(--gx-hair); text-align: start;
}
.gx-breaks thead th { font: var(--gx-label); color: var(--gx-ink-3); }
.gx-num { text-align: end; font-variant-numeric: tabular-nums lining-nums; }

/* ---- stock ----------------------------------------------- */
.gx-stock { margin: var(--gx-s-3) 0 0; font: var(--gx-dense); color: var(--gx-ink-2); }
.gx-stock__glyph { margin-inline-end: var(--gx-s-2); }
.gx-stock--in    .gx-stock__glyph { color: var(--gx-act); }
.gx-stock--low   .gx-stock__glyph { color: var(--gx-warn); }
.gx-stock--order .gx-stock__glyph { color: var(--gx-ink-3); }
.gx-stock--out   { color: var(--gx-ink-3); }

/* ---- product card ---------------------------------------- */
.products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gx-s-6); }
.columns-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gx-card {
  display: flex; flex-direction: column;
  padding-block-end: var(--gx-s-5);
  border-block-end: 1px solid var(--gx-hair);
}
.gx-card__link { text-decoration: none; color: inherit; }
.gx-card__media { background: var(--gx-band); border-radius: var(--gx-r-panel); overflow: clip; }
.gx-card__media img { inline-size: 100%; block-size: auto; display: block; }
.gx-card__title {
  margin: var(--gx-s-4) 0 0; font: var(--gx-sub);
  letter-spacing: var(--gx-sub-track); color: var(--gx-ink);
}
.gx-card__sku    { margin: var(--gx-s-2) 0 0; font: var(--gx-mono); color: var(--gx-ink-3); }
.gx-card__grade  { margin: var(--gx-s-2) 0 0; font: var(--gx-label); color: var(--gx-ink-3); }
.gx-card__seller { margin: var(--gx-s-2) 0 0; font: var(--gx-dense); color: var(--gx-ink-3); }
.gx-card__action { margin-block-start: auto; padding-block-start: var(--gx-s-4); }

/* Compact mode: a trade buyer scanning sixty rows. Padding shrinks,
   target size does not — the hit area still exceeds the visible row. */
.is-compact .columns-3 { grid-template-columns: 1fr; gap: 0; }
.is-compact .gx-card {
  flex-direction: row; align-items: center; gap: var(--gx-s-5);
  padding-block: var(--gx-row-pad);
}
.is-compact .gx-card__media  { inline-size: 64px; flex: 0 0 64px; }
.is-compact .gx-card__title  { font: var(--gx-body); margin: 0; }
.is-compact .gx-card__action { margin-block-start: 0; margin-inline-start: auto; }
.is-compact .gx-price        { margin: 0; }

/* ---- grade ladder ---------------------------------------- */
.gx-grades { padding-block: var(--gx-band-pad); background: var(--gx-band); }
.gx-grades > * { max-inline-size: var(--gx-measure-max); margin-inline: auto;
                 padding-inline: var(--gx-gutter); }
.gx-grades h2 { font: var(--gx-band-head); letter-spacing: var(--gx-band-head-track); margin: 0; }
.gx-grades__lede {
  font: var(--gx-lede); color: var(--gx-ink-2);
  max-inline-size: var(--gx-measure-lede); margin-block: var(--gx-s-5) var(--gx-s-7);
}
.gx-grades__scroll { overflow-x: auto; }
.gx-grades__table { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; }
.gx-grades__table th, .gx-grades__table td {
  padding: var(--gx-s-5) var(--gx-s-4);
  text-align: start; vertical-align: top;
  border-block-end: 1px solid var(--gx-rule);
}
.gx-grades__table thead th { border-block-end: 2px solid var(--gx-ink); }
.gx-grades__label   { display: block; font: var(--gx-sub); letter-spacing: var(--gx-sub-track); }
.gx-grades__summary { display: block; margin-block-start: var(--gx-s-2);
                      font: var(--gx-dense); color: var(--gx-ink-3); font-weight: 400; }
.gx-grades__table tbody th { font: var(--gx-label); color: var(--gx-ink-3); }
.gx-grades__table tbody td { font: var(--gx-body); color: var(--gx-ink-2); }

/* ---- grade panel on the product page --------------------- */
.gx-grade {
  margin-block: var(--gx-s-5); padding: var(--gx-s-5);
  background: var(--gx-band); border-radius: var(--gx-r-panel);
}
.gx-grade__head { margin: 0 0 var(--gx-s-4); font: var(--gx-body); }
.gx-grade__list { display: grid; grid-template-columns: auto 1fr;
                  gap: var(--gx-s-2) var(--gx-s-5); margin: 0; }
.gx-grade__list dt { font: var(--gx-label); color: var(--gx-ink-3); }
.gx-grade__list dd { margin: 0; font: var(--gx-dense); color: var(--gx-ink); }

/* ---- mixed cart ------------------------------------------ */
.gx-cart__mixed {
  padding: var(--gx-s-5); margin-block-end: var(--gx-s-5);
  background: var(--gx-act-tint);
  border-inline-start: 3px solid var(--gx-act);
  border-radius: var(--gx-r-inline);
}
.gx-cart__mixed p { margin: 0 0 var(--gx-s-3); font: var(--gx-dense); color: var(--gx-ink-2); }
.gx-cart__mixed p:last-child { margin-block-end: 0; }
.gx-cart__mixed-head { font: var(--gx-price-inline) !important; color: var(--gx-ink) !important; }
.gx-cart__seller { display: block; margin-block-start: var(--gx-s-2);
                   font: var(--gx-dense); color: var(--gx-ink-3); }

/* ---- vendor storefront ----------------------------------- */
.gx-vendor { max-inline-size: var(--gx-measure-max); margin-inline: auto;
             padding: var(--gx-band-pad) var(--gx-gutter); }
.gx-vendor__head { margin-block-end: var(--gx-s-7); }
.gx-vendor__head h1 { font: var(--gx-band-head); letter-spacing: var(--gx-band-head-track); margin: 0; }
.gx-vendor__meta { font: var(--gx-body); color: var(--gx-ink-2);
                   max-inline-size: var(--gx-measure-lede); margin-block-start: var(--gx-s-4); }

/* ---- footer ---------------------------------------------- */
.gx-foot {
  margin-block-start: var(--gx-s-9);
  padding-block: var(--gx-band-pad) calc(var(--gx-bar) + var(--gx-s-7));
  background: var(--gx-band); border-block-start: 1px solid var(--gx-hair);
}
.gx-foot__inner {
  max-inline-size: var(--gx-measure-max); margin-inline: auto;
  padding-inline: var(--gx-gutter);
  display: grid; gap: var(--gx-s-7);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gx-foot__blurb { font: var(--gx-dense); color: var(--gx-ink-3); margin-block-start: var(--gx-s-3); }
.gx-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gx-s-3); }
.gx-foot__list a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  color: var(--gx-ink-2); font: var(--gx-body); text-decoration: none;
}
.gx-foot__list a:hover { color: var(--gx-ink); text-decoration: underline; }
.gx-foot__legal p { font: var(--gx-dense); color: var(--gx-ink-3); margin: 0 0 var(--gx-s-3); }
.gx-foot__note { max-inline-size: 48ch; }

@media (max-width: 640px) {
  .gx-head__inner, .gx-foot__inner, .gx-vendor { padding-inline: var(--gx-s-5); }
  .gx-grades { padding-block: var(--gx-band-pad-mob); }
  .gx-grades > * { padding-inline: var(--gx-s-5); }
}